Блог

Главная - Вопросы по программированию - Нисходящие буквы обрезаются при использовании -webkit-line-clamp с уменьшенной высотой строки

Нисходящие буквы обрезаются при использовании -webkit-line-clamp с уменьшенной высотой строки

#css #bootstrap-4

#css #bootstrap-4

Вопрос:

Я пытаюсь ограничить количество строк, которые может использовать заголовок -webkit-line-clamp . Однако, поскольку заголовок также имеет уменьшенные line-height буквы, у которых есть дескрипторы («g», «j», «p», «q» и «y»), обрезаются в нижней строке. Как я могу это исправить, чтобы потомки этих букв не обрезались?

 p {
    width: 140px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    display: -webkit-box;
    overflow: hidden;
    line-height: 1;
}

p.small {
    width: 100px;
    font-size: 12px;
}

p.large {
    font-size: 22px;
}  
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<p title='The "g" in this title gets cut off at the bottom'>The "g" in this title gets cut off at the bottom</p>
<p class="large" title='The "g" in this title gets cut off at the bottom'>The "g" in this title gets cut off at the bottom</p>
<p class="small" title='The "g" in this title gets cut off at the bottom'>The "g" in this title gets cut off at the bottom</p>

Комментарии:

1. Так зачем ограничивать высоту строки, поскольку это проблема?

2. Уменьшение высоты строки приводит к тому, что заголовок занимает меньше места и выглядит лучше imo. По той же причине, по которой я использую line-clamp, чтобы в первую очередь ограничить количество строк. imgur.com/ijQz4s2

3. Ну, единственный способ избежать этой проблемы — иметь высоту строки 1 или больше. в этом смысл line-height .

4. @Paulie_D Очевидно, что это не так. Я отредактировал фрагмент, и с помощью a line-height 1 дескрипторы все еще обрезаются. Интересно, что этого не происходит, если текст маленький.

5. Обновлено, чтобы показать, что проблема возникает более агрессивно при использовании bootstrap, в том числе при меньших размерах текста.

Ответ №1:

Мне приходилось сталкиваться с такой ситуацией раньше, и я использовал небольшую хитрость, чтобы добавить отступ внизу только относительно font-size , чтобы он не отображал следующую строку и сохранял текст по-прежнему читаемым.

Чтобы устранить проблему, добавьте padding-bottom: 0.14em; стиль к p элементу. Я заметил, что значения от 0,12 до 0,15 лучше всего работают с разными семействами шрифтов.

 p {
    width: 140px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    display: -webkit-box;
    overflow: hidden;
    line-height: 1;
    padding-bottom: 0.14em;
}

p.small {
    width: 100px;
    font-size: 12px;
}

p.large {
    font-size: 22px;
}  
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<p title='The "g" in this title gets cut off at the bottom'>The "g" in this title gets cut off at the bottom</p>
<p class="large" title='The "g" in this title gets cut off at the bottom'>The "g" in this title gets cut off at the bottom</p>
<p class="small" title='The "g" in this title gets cut off at the bottom'>The "g" in this title gets cut off at the bottom</p>

Ответ №2:

У меня была такая же проблема с плагином Tailwind line-clamp (который фактически идентичен описанным выше атрибутам с использованием class line-clamp-2 ).

Poppins кажется ужасным шрифтом для этого. Он обрезает нижнюю часть буквы g padding-bottom: 0.0725em и показывает верхнюю часть следующей строки (т. Е. Верхнюю Часть скрытой зажатой области) padding-bottom: 0.073em .

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