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

Question

Всякий раз, когда letter-spacing применяется к чему-либо с подчеркиванием или нижней границей, кажется, что подчеркивание выходит за рамки текста справа. Есть ли какой-нибудь способ предотвратить расширение подчеркивания за пределы последней буквы в тексте?

Например:

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

Возможно, это было бы возможно с фиксированной шириной <div> и рамкой, но на самом деле это не вариант окружить каждый подчеркнутый элемент.

Спасибо!

Answer 1

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

Например:

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's 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's 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 имели межбуквенный интервал в 2 пикселя, центрированный текст и подчеркивание с дополнительным пространством между текстом и подчеркиванием.Мой 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 для достижения того же результата.

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

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

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

Neal

Answer 2

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

Эту проблему можно решить, если последняя буква текстового блока не имеет свойства «межстрочный интервал». Например:

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

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

Answer 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

Answer 4

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

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

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

Answer 5

Я бы не стал ломать tex<span>t</span> по причинам SEO, поэтому я предпочитаю заменять подчеркивание на поддельное. CSS calc может помочь вам с его шириной.

a{
  text-decoration:none;
  letter-spacing:15px;
  color:red;
  display:inline-block;
}

a .underline{
  height:2px;
  background-color:red;
  width: calc(100% - 15px); /*minus letter spacing*/
}

<a href="#">Text
<div class="underline"></div></a>

Answer 6

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

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

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

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

Answer 7

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

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

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

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