Отключить подчеркивание для символов нижнего регистра: g q p j y?

Ответ 1

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

здесь пример с display:table, чтобы разрешить центральный текст и строку прерывания до и после: http://codepen.io/gc-nomade/pen/vJoKB/ Какая идея?

• установка меньшей высоты строки, чем размер шрифта, приводит к переполнению текста из его контейнера.
• нарисовать нижнюю границу для подчеркивания текста
• SVG предлагает stroke, в CSS, мы можем сделать что-то подобное, увеличивая text-shadow с тем же цветом, что и фон.
• DEMO, вы можете даже установить другой цвет для подчеркивания simili и добавить отбрасывающую тень.

  ---

В более старом браузере вы потеряете параметр box-shadow, но вы по-прежнему можете использовать стили double, groove или ridge border с разным цветом, чем текст.

Спасибо @PatNewell за эту ссылку: https://medium.com/designing-medium/7c03a9274f9

Ответ 2

В этом решении используется jQuery, чтобы автоматизировать перенос букв в подчеркивание в теге <span>.

DEMO

Как родители с text-decoration:underline "переопределяют" детей с text-decoration:none; (см. здесь). Метод состоит в том, чтобы обернуть только целевые буквы (подчеркивания) с помощью <span class="underline"> и применить text-decoration:underline; к этому классу.

Выход:

Знаки, которые не будут подчеркнуты:

g  j  p  q  y  Q  @  {  _  (  )  [  |  ]  }  ;  ,  §  µ  ç  /

HTML:

<h1 class="title">George quietely jumped!</h1>

CSS:

.underline {
    text-decoration:underline;
}

jQuery:

$('.title').each(function () {
    var s = '<span class="underline">',
        decoded;
    $(this).prop('innerHTML', function (_, html) {
        s += html.replace(/&amp;/g, '&').replace(/(g|j|p|q|y|Q|@|{|_|\(|\)|\[|\||\]|}|;|,|§|µ|ç|\/)/g, '</span>$1<span class="underline">');
        s += '</span>'
        $(this).html(s);
    });
});

Ответ 3

Модуль оформления текста Уровень 3 вводит text-decoration-skip

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

Вы можете достичь желаемого поведения, установив его на ink:

Пропустить, где изображены глифы: прерывать линию украшения, чтобы позволить форма текста показывает, где украшение текста было бы иначе пересечь глиф. UA должен пропустить небольшое расстояние до с обеих сторон контура глифа.

h1 {
  text-decoration: underline;
  text-decoration-skip: ink;
}

<h1>George quietely jumped!</h1>

Ответ 4

Если вы знаете свой цвет фона (при этом в этом случае белый), сделайте снимок:

h1 {
    line-height: 0.9em;
    border-bottom: 1px solid black;
    text-shadow: 2px 2px #fff, -2px 2px #fff;
}

идея:

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

скрипт: http://jsfiddle.net/pmn4/a5LZE/

fyi - браузеры не играют с текстовой тенью; используйте его консервативно!

Ответ 5

Было бы больно в заднице, но я бы сделал класс "underline", а затем зашел и сделаю это вручную

HTML

<h1><span class="underline">Ver</span>g<span class="underline">eten Kanalen</span></h1>

CSS

.underline{text-decoration:underline;}

Ответ 6

Вот мое решение:

Рабочая скрипта

CSS

h1, h2 {
  background-image: linear-gradient(to top, transparent 0px, transparent .15em, red .15em, red calc(.15em + 1px), transparent calc(.15em + 1px), transparent 100%);
  text-shadow: 0px -2px 3px white, 0px -2px 3px white, 0px -2px 3px white, 0px -2px 3px white, 0px -2px 3px white, 0px -2px 3px white;
}

Ответ 7

Посмотрите на text-decoration-skip-ink свойство CSS. Это может указать, как подчеркивания и подчеркивания отображаются при прохождении над символами по возрастанию и спуску.

h1 {
  text-decoration: black underline;
  text-decoration-skip-ink: auto;
}

<h1>George quietely jumped!</h1>