Помогите запретить <p> вылезать за рамки и при выходе ставить ... (html,css)

30 декабря 2021, 17:10

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

Answer 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>