Как я могу удалить межбуквенный интервал для последней буквы элемента в CSS? - PullRequest
37 голосов
/ 05 августа 2011

Вот изображение на моей странице HTML. Текстовое меню находится внутри правого элемента div и имеет межбуквенный интервал 1.2em. Есть ли для этого псевдоселектор? Я не хотел бы прибегать к относительному позиционированию.

Мне бы хотелось, чтобы текстовое меню заканчивалось там, где заканчивается блок.

Right text-aligned div where letter spacing applies for all characters of a line

Я уже отметил лучший ответ, но меня спросили о разметке независимо от CodeBlock. Вот оно.

<div class="sidebar">
        <span class="menuheader">MENU</span>
        <ul>
        <li><a href="#content">Content</a></li>
        <li><a href="#attachments">Attachments</a></li>
        <li><a href="#subpages">Sub-pages</a></li>
        <li><a href="#newsubpage">New sub-page</a></li>
        </a></ul>
</div>

.sidebar{
color: rgb(150,93,101);
display: inline;
line-height: 1.3em;
position: absolute;
top: 138px;
width: 218px;
}

.menuheader{
letter-spacing: 1.1em;
margin: -1.2em;
text-align: right;
}

Ответы [ 3 ]

40 голосов
/ 05 августа 2011

Вы можете установить для своего элемента правое поле -1,2em, которое будет противодействовать межбуквенному интервалу.

, например

.menu-header-selector {
  display:block;
  letter-spacing:1.2em;
  margin-right:-1.2em;
  text-align:right;
}

Чтобы ответить на ваш вопрос относительно псевдоселектора, насколько я знаю, для каждого символа не существует псевдоселектора. (РЕДАКТИРОВАТЬ: поцарапайте, есть селектор :First-Letter, на который указал Джонас Г. Дрейндж).

РЕДАКТИРОВАТЬ: Вы можете найти базовый образец здесь: http://jsfiddle.net/teUxQ/

18 голосов
/ 05 августа 2011

На самом деле я бы назвал это ошибкой браузера. spec говорит, что это интервал между символами, в то время как ваш браузер (и мой), похоже, изменяет интервал после символов. Вы должны отправить сообщение об ошибке.

3 голосов
/ 05 августа 2011

Нельзя указывать последний символ, только первый (CSS3,: first-letter).Вы можете добавить интервал вокруг последней буквы, но это будет означать добавление бессмысленной разметки, которая «хуже», чем добавление позиционирования к элементу.

CSS идеально подходит для таких хитростей:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...