Используя только CSS, есть ли способ ограничить текст внутри div ровно X количеством символов без использования многоточия?
Я знаю, что мы можем ограничить текст определенными символами, используя многоточие или даже использовать JavaScript. Но мне интересно, если нет доступного JavaScript, и я не хочу, чтобы многоточие (...) в конце моего текста, можно ли это сделать, просто используя CSS?
Например, скажем, у меня есть следующий HTML-код: если я хочу ограничить myText всего 20 символами (с пробелами), как мне это сделать?
<div class = "myDiv">
<p class = "myText">HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets and scripting
languages such as JavaScript.</p>
</div>«Если я хочу ограничить myText всего 20 символами (с пробелами), как мне это сделать?» - если вы изначально не использовали моноширинный шрифт, это вряд ли будет возможно. Используя моноширинный шрифт, вы можете попытаться ограничить его подходящую ширину, используя относительную единицу измерения, например ch или em.
Ответы 3
Краткий ответ: не без JS.
Приблизительно, если вы знаете размер шрифта и пользователь не масштабирует, вы можете сделать скрытое переполнение.
.myText {
width: 151px; /* Adjust this value based on your specific font and size */
white-space: nowrap;
overflow: hidden;
}<div class = "myDiv">
<p class = "myText">HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets and scripting
languages such as JavaScript.</p>
</div>Существует значение длины CSS ch.
p {
overflow: hidden;
max-width: 75ch;
white-space: nowrap;
}
И как это будет работать здесь?
вам не хватает шрифта... не каждый шрифт является моноширинным, поэтому символы могут иметь разную длину... поэтому этот пример не всегда работает.
Я думаю, что единственный способ обойтись без Javascript — это использовать моноширинный шрифт и модуль CSS ch.
.myDiv {
width: 20ch;
overflow: hidden;
font-family: Courier, monospace;
white-space: nowrap;
}<div class = "myDiv">
<p class = "myText">HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets and scripting
languages such as JavaScript.</p>
</div>
Теоретически вы можете указать альтернативу символу многоточия, используя text-overflow (и эта альтернатива также может быть пустой строкой), но поддержка браузеров пока не очень хороша, в настоящее время только Firefox.