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

Ответ 1

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

Ответ 2

Вы можете сделать это:
( Примечание! Это 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 */
    }

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

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

p {
word-wrap: break-word;
}

Ответ 6

Другим подходом к этому будет элемент span с стилем display: block внутри элемента 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.