0

введите сюда описание изображения введите сюда описание изображения

введите сюда описание изображения

введите сюда описание изображения на некрасивую линию прошу не обращать внимание. Как видно если текста больше чем надо, он вылазиет за рамки. НУжно что бы он просто ставил ... и обрезался. это тег p который находится в блоке. Весь нижний текст "Вы: Много текста..." это границы блока. Через overflow: hiiden с границами он просто обрезает. А нужно ставить ... . Пробовал по количеству символов обрезку делать, не выходит если в сообщении есть перенос строки

9
  • В CSS это работает только для однострочного текста. Устроит? 15 дек 2019 в 16:21
  • Да, но elipsis пробовал, не работает) 15 дек 2019 в 16:22
  • white-space: nowrap; /* Запрещаем перенос строк */ overflow: hidden; /* Обрезаем все, что не помещается в область */ text-overflow: ellipsis; /* Добавляем многоточие */
    – Oleksandr
    15 дек 2019 в 16:23
  • посмотрите тут htmlbook.ru/css/text-overflow
    – Oleksandr
    15 дек 2019 в 16:24
  • 1
    @DmitryDevelop, для p 15 дек 2019 в 16:25

1 ответ 1

1

body {
  margin: 0;
  display: flex;
  min-height: 100vh;
}

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: auto 0;
}
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris efficitur tincidunt mollis. Aliquam ullamcorper mi ullamcorper risus eleifend, sit amet mattis augue consequat. Quisque nec urna vestibulum, facilisis felis id, auctor lacus. Cras sodales
  sit amet sem convallis lobortis. Curabitur gravida neque orci, et tempor dolor sagittis a. Pellentesque maximus volutpat luctus. Nulla ullamcorper, magna vel scelerisque tincidunt, dui ligula sollicitudin tellus, vitae iaculis purus urna a libero. Nunc
  ut tempor neque, in mattis lorem. Curabitur in pulvinar lorem. Aliquam vehicula metus vel enim vehicula molestie.
</p>

Ваш ответ

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

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