как обрезать текст в одну строку?

Question

как обрезать текст в одну строку?

Рейтинг: 0Ответов: 2Опубликовано: 01.03.2023

подскажите пожалуйста, как вывести только первую строку и остальной текст скрыть многоточием но при этом не ограничивать фиксированной шириной, а использовать 100% от ширины блока?

overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  max-width: 444px; // такой вариант не подходит, так как на телефоне блок тенется и получается что обрезаем текст по середине

css

Источник: Stack Overflow на русском

Answer 1

▲ 0

div {
  width: 250px
}

p {
font-size: 0px;
padding-right: 10px;
position: relative;
}

p:after {
  content: '...';
  font-size: 24px;
  position: absolute;
  right: 0;
  bottom: 0;
}

p:first-line {
  font-size: 24px;

  }

<div>
<p>b h bh bh d dsfh dfh df hdfkh kfdhhhhfd fhd fd fdhb fd hfdh bfd hbfdbh vfbhj jhbjh b jhb jhbhbf hjzf dz zzbz bhj zbhjzhjbzhjbfdzhjb hjb bhj fvbhjf jhb jhb jhbfz jhbf bjh zhjz z dz dfz hdhjbhjbfjhzhjb hjb zbhjhjbz hjbhjb hjb bh jb hjhbj hbjhbjhbjbzz df bh f z z z    hbj     bhf bhjzfhbjvhjbfvhhbjvfd  b</p>
</div>

Answer 2

▲ -1

То что закоменчено может вам понадобиться, если захотите троеточие после 2 строк или трех и т.д.

.text-wrapper {
  width: 100%;
  border: 1px solid #000;
  display: block;
  box-sizing: border-box;
}
p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  // white-space: initial;
  // display: -webkit-box;
  // -webkit-box-orient: vertical;
  // -webkit-line-clamp: 2;
}

<div class="text-wrapper">
  <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</p>
</div>

как обрезать текст в одну строку?

Ответы