Текст CSS подчеркивается слишком длинным, когда наносится интервалы.

Question

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

Например:

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

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

Спасибо!

Answer 1

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

Вы можете решить это, имея последнюю букву текстового блока, не имеющего свойство «Интернет-интервал». Например:

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

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

Answer 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'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>

Вот и все!

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

Например, в настоящее время я работаю над сайтом, который требует, чтобы элементы 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 (половина 1ЕМ-интервала письма, которые мы использовали в верхнем примере) непосредственно на элементе H1 (не: после псевдоустройства) должен Исправьте это, хотя я еще не проверил это.

Любая обратная связь с благодарностью получена!

Нил

Answer 3

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

<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

Спасибо за ответы, я полагаю, это ограничение 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 (особенно пытаясь определить расстояние между линией и текстом, толщиной и т. Д.), Но я полагаю, что это работает на данный момент.

Answer 6

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

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

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

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

Answer 7

Я бы не сломался 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>