Ограничение количества символов в строке с помощью CSS

Question

У меня есть абзац текста:

<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

Как я могу убедиться, что в одной строке с CSS отображается не более 30 символов?

Answer 1

Вы можете сделать это:
( Примечание ! Это CSS3 и поддержка браузера = хорошо !!)

   p {
    text-overflow: ellipsis; /* will make [...] at the end */
    width: 370px; /* change to your preferences */
    white-space: nowrap; /* paragraph to one line */
    overflow:hidden; /* older browsers */
    }

Answer 2

Это невозможно в CSS, для этого вам придется использовать Javascript. Хотя вы можете установить ширину p до 30 символов, следующие буквы будут автоматически уменьшаться, но, опять же, это будет не так точно и будет меняться, если символы заглавные.

Answer 3

Если вы используете CSS для выбора моноширинного шрифта, проблема изменения длины символа легко решается.

Answer 4

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

p {
  max-width: calc(30em * 0.5);
}

Число, на которое вы умножаетесь, зависит от того, какой это шрифт и сколько символов занимает квадрат. Больше символов = менее точно.

Answer 5

Последний способ - использовать единицу 'ch', которая обозначает символ.

Вы можете просто написать:

p { max-width: 75ch; }

Единственная хитрость в том, что пробелы не будут считаться символами ..

Проверьте также этот пост: https://stackoverflow.com/a/26975271/4069992

Answer 6

Лучшим решением было бы использовать в стиле css команду разбивать строки. Работает в старых версиях браузеров.

p {
word-wrap: break-word;
}

Answer 7

Другой подход к этому - поместить элемент span с дисплеем : блок в стиле Элемент p каждый раз, когда вам нужно, чтобы содержимое разрывалось. Это будет полезно, только если ваш контент p статичен.

<p>this is a not-dynamic text and I want to put<span style="display:block">the following words in the next line</span>and these other words in a third one</p>

Будет выведено:

Это не динамический текст, и я хочу поставить

следующие слова в следующей строке

и эти другие в третьем

Это позволяет вам изменять разрывы текста в разных окнах просмотра без JS.