Блог

Главная - Вопросы по программированию - Как я могу убедиться, что появится многоточие, если переполнение происходит там, где происходит естественный разрыв слова?

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

#css #ellipsis

Вопрос:

Во всех ячейках этой таблицы слишком много содержимого, поэтому все они должны заканчиваться многоточием. Но я обнаружил, что многоточие не появляется, если естественный разрыв слова происходит там, где должно быть многоточие. Эти две ячейки имеют одинаковый стиль:

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

Я не могу понять, как сделать так, чтобы многоточие появилось в конце текста в первой ячейке. Вот мой код:

 td {
  vertical-align: top;
}
.inner {
  width: 200px;
  max-height: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
}

<td>
  <div class="inner">An award winning podcast and nationally syndicated radio show that looks at the innovations that are changing our lives.</div>
<td>
<td>
  <div class="inner">https://killerinnovations.com/wp-content/uploads/2020/09/cropped-KIlogofavicon-32x32.jpg</div>
<td>

Цель .inner div заключается в том, что td не учитывает максимальную высоту, и я хочу, чтобы они были высотой не более 3 строк. Как мне вернуть пропущенное многоточие?

Кроме того, нежелательно, чтобы вторая ячейка ставила многоточие в конце каждой строки, вместо того, чтобы оборачивать все целиком и ставить только один многоточие в конце. Но я могу с этим смириться.

Ответ №1:

Если, однако, вам это не нравится white-space: nowrap; , то нет никакого способа создать эффект 3 точек с помощью чистого css.

Тем не менее, я бы предложил сделать что-то подобное, как показано в Reddit, где вы медленно удаляете содержимое. Вы можете изменить направление затухания, изменив 90deg значение в CSS.

 div {
  -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent);
  overflow: hidden;
  background: #ccc;
  padding: 11px;
  width: 250px;
  height: calc(1em);
  resize: horizontal;
} 
 <div>Try to resize me by dragging the lower right corner. Very very long text may go here so that it overflows!</div>

Ответ №2:

При использовании ellipsis вам также необходимо указать 2 других правила. Они white-space: nowrap; и overflow: hidden есть .

Попробуйте запустить фрагмент и изменить размер серого поля.

 div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  
  resize: horizontal;
  background: #ccc;
  padding: 15px;
  width: 250px;
} 
 <div>Very very long text may go here so that it overflows.</div>

Комментарии:

1. Я попробовал nowrap, но обнаружил, что это ограничивает его одной строкой, и я хочу отобразить до 3 строк, чтобы лучше просмотреть содержимое. (Я уже использую переполнение: скрыто)

2. В чистом CSS этого сделать невозможно. Что я бы посоветовал, так это скопировать то, что Google делает со своими вкладками Chrome — они не используют 3 точки, а вместо этого медленно удаляют текст, пока он больше не будет виден. Эта альтернатива возможна с помощью чистого CSS.

3. Потерпите, я опубликую еще один ответ, чтобы показать, как это сделать.

Метки: , , ,