1

Здравствуйте! Как мне сделать, что бы текст, который не вмещается в блок, не переносился на новую строку, а обрезался с добавлением многоточия?

p {
   border:1px black solid;
   width:20%;
   white-space: pre;
}
<p>
   123 123 123
</p>

2
  • Не понял вопроса :)
    – Yuri
    23 дек 2016 в 21:28
  • при нехватки места чтобы текст не переносился на новую строку а пропадал оставляя моготочие
    – PeGaS
    23 дек 2016 в 21:41

1 ответ 1

5

Для этого есть специальный стиль text-overflow

div {
   width: 200px;
   white-space: nowrap;
   overflow: hidden;
   padding: 5px;
   text-overflow: ellipsis;
   border:1px solid #000;
}
<div>
   Текст: ляляля у меня в шкафу есть трусиля
</div>

2
  • 1
    а если длинный текст ? скажем в пять строчек надо перенести и на пятой строе получится сделать text-overflow: ellipsis; ?
    – user33274
    24 дек 2016 в 6:15
  • text-overflow работает согласно размерам блока и то что не влезет в него, через свойство ellipsis добавиться троеточие. если вам надо после определенного количества знаков поставить троеточие, то это только javascript
    – Юрий
    24 дек 2016 в 8:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.