0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Иногда бывает ситуация, когда слишком длинный текст неудобно отображать в блоке на странице, но необходимо дать пользователю информацию о том, текст большой. В данной ситуации используется CSS свойство<a>text-overflow</a>. text-overflow работает в том случае, если для блока c данными, задано значение свойства overflow такое как auto, scroll или hidden и white-space: nowrap. Рассмотрим пример.</p>
1
<p>Иногда бывает ситуация, когда слишком длинный текст неудобно отображать в блоке на странице, но необходимо дать пользователю информацию о том, текст большой. В данной ситуации используется CSS свойство<a>text-overflow</a>. text-overflow работает в том случае, если для блока c данными, задано значение свойства overflow такое как auto, scroll или hidden и white-space: nowrap. Рассмотрим пример.</p>
2
<p>Исходный HTML документ:</p>
2
<p>Исходный HTML документ:</p>
3
<div class="long-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div><p>CSS стили:</p>
3
<div class="long-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div><p>CSS стили:</p>
4
.long-text { /* Делаем видиму границу блока и добавляем внутренний отступ */ border: 1px solid #245488; padding: 10px; width: 150px; /* Эти опции - необходимые условия */ overflow: hidden; white-space: nowrap; /* Добавляем троеточия в конце предложения, если текст не помещается в блок */ text-overflow: ellipsis; }<p>Результат:</p>
4
.long-text { /* Делаем видиму границу блока и добавляем внутренний отступ */ border: 1px solid #245488; padding: 10px; width: 150px; /* Эти опции - необходимые условия */ overflow: hidden; white-space: nowrap; /* Добавляем троеточия в конце предложения, если текст не помещается в блок */ text-overflow: ellipsis; }<p>Результат:</p>