Текст CSS слишком длинный, если применяется интервал между буквами?

Ответ 1

Проблема заключается в том, что "letter-spacing" добавляет пробел, добавляя пробел после каждой буквы, но это пространство принадлежит букве, и, следовательно, последнее имеет дополнительную подчеркивание, которая делает его похожим на расширение за последней буквой (если вы выберете мышью последнюю букву div, вы увидите, что я имею в виду).

Вы можете решить это, если последняя буква текстового блока не имеет свойства "letter-spacing". Например:

<span style="letter-spacing: 1em; text-decoration: underline;">SPACEEE</span>
<span style="text-decoration: underline;">.</span>

Это далеко не идеальный, но если он не только текст одной строки (там вы можете использовать отрицательный запас справа), я не могу думать о каком-либо другом решении.

Ответ 2

Это не идеально, но лучшим решением, которое я придумал до сих пор, является его маскирование с помощью: после псевдоэлемента. Таким образом, нет необходимости в дополнительных элементах во всем тексте.

Например:

h1 {
  /* A nice big spacing so you can see the effect */
  letter-spacing: 1em;
  /* we need relative positioning here so our pseudo element stays within h1 box */
  position: relative;
  /* centring text throws up another issue, which we'll address in a moment */
  text-align: center;
  /* the underline */
  text-decoration: underline;
}

h1:after {
  /* absolute positioning keeps it within h1 relative positioned box, takes it out of the document flow and forces a block-style display */
  position: absolute;
  /* the same width as our letter-spacing property on the h1 element */
  width: 1em;
  /* we need to make sure our 'mask' is tall enough to hide the underline. For my own purpose 200% was enough, but you can play and see what suits you */
  height: 200%;
  /* set the background colour to the same as whatever the background colour is behind your element. I've used a red box here so you can see it on your page before you change the colour ;) */
  background-color: #990000;
  /* give the browser some text to render (if you're familiar with clearing floats like this, you should understand why this is important) */
  content: ".";
  /* hide the dynamic text you've just added off the screen somewhere */
  text-indent: -9999em;
  /* this is the magic part - pull the mask off the left and hide the underline beneath */
  margin-left: -1em;
}

<h1>My letter-spaced, underlined element!</h1>

И это!

Вы можете также использовать границы, если хотите более тонкий контроль над цветом, позиционированием и т.д., но для этого требуется добавить элемент span, если у вас нет фиксированной ширины.

Например, я сейчас работаю над сайтом, который требует, чтобы элементы h3 имели 2px-расстояние между буквами, центрированный текст и подчеркивание с добавленным пространством между текстом и подчеркиванием. Мой css выглядит следующим образом:

h3.location {
  letter-spacing: 2px;
  position: relative;
  text-align: center;
  font-variant: small-caps;
  font-weight: normal;
  margin-top: 50px;
}

h3.location span {
  padding-bottom: 2px;
  border-bottom: 1px #000000 solid;
}

h3.location:after {
  position: absolute;
  width: 2px;
  height: 200%;
  background-color: #f2f2f2;
  content: ".";
  text-indent: -9999em;
  margin-left: -2px;
}

а мой HTML:

<h3><span>Heading</span></h3>

Примечания:

Это не 100% хороший CSS, но он, по крайней мере, означает, что вам не нужно изменять и взламывать HTML-код для достижения того же результата.

Мне еще не пришлось пробовать это на элементе с фоновым изображением, поэтому еще не подумал о методе достижения этого.

Центрирующий текст заставляет браузер отображать текст в неположенном месте (после этого учитывается текст + дополнительный интервал), поэтому все выталкивается влево. Добавление текстового отступа 0.5em (половина интервала между буквами, которое мы использовали в верхнем примере) непосредственно в элементе h1 (а не: после псевдоэлемента) должно исправить это, хотя я не тестировал это еще.

Любые отзывы с благодарностью принимаются!

Нил

Ответ 3

Вы также можете использовать абсолютный позиционированный псевдоэлемент для достижения подчеркивания и встретить смещение, указав его с использованием свойства left и right. Нажмите ниже для примера.

<span style="letter-spacing: 5px; position: relative">My underlined text</span>

span:after {
    content: '';
    border-bottom:1px solid #000;
    display: block;
    position: absolute;
    right: 5px;
    left: 0;
}

https://codepen.io/orangehaze/pen/opdMoO

Ответ 4

Насколько я знаю, вы ничего не можете с этим поделать. Я думаю, что большинство браузеров добавляют расстояние между буквами после каждого письма, включая последнее. Существуют любые свойства CSS, которые обеспечивают более точное управление интервалом между буквами.

Это, похоже, решает проблему, сортировку, в Firefox 3.6 на моем Mac, но ее не очень практично делать это для каждого подчеркнутого элемента.

<span style="border-bottom: 1px solid black;">
    <span style="letter-spacing: 1em;">Tes</span>t
</span>

Ответ 5

Спасибо за ответы, я полагаю, что это ограничение css/html. К счастью, эти ссылки были введены через php, поэтому я написал script, чтобы окружить их соответствующим образом, хотя это не совсем идеальное решение, оно работает:

$part1 = substr($string, 0, -1);
$part2 = substr($string, -1);
$full = "<span style='letter-spacing: 1em'>".$part1."</span><span>".$part2."</span>";

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

Слишком плохое управление подчеркиваниями довольно ограничено html/css (особенно, чтобы определить расстояние между строкой и текстом, толщиной и т.д.), но я полагаю, что это работает сейчас.

Ответ 6

Если вы не хотите разбить последнюю букву "Тест", вы можете просто обернуть ее с помощью span и сделать это:

span {
    letter-spacing: 1.1em;
    margin-right: -1.1em;
}

Как вы можете видеть, он работает даже с эластичными единицами. Если у a нет настраиваемого поля, вы можете пропустить добавление span и применить этот стиль непосредственно к a

Это творит чудеса для меня =)