Обрезать текст до последнего слова, если он длиннее ширины ячейки таблицы

У меня фиксированная ширина td. Текст внутри не должен переноситься на вторую строку. Если текст длиннее ширины ячейки, он должен быть обрезан до последнего слова. Если в нем нет места и он не может разбиваться до последнего слова, он должен разбиваться на максимальную ширину ячейки.

Для этого примера https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap, я хочу, чтобы в ячейке было только слово «Этот абзац содержит».

У меня такое ощущение, что это какая-то комбинация word-break и white-space : no-wrap, но я не могу заставить ее работать.


text html css break
person m0kchya    schedule 09.10.2017    source источник
comment
Вы ищете что-то вроде overflow-x: hidden? Или даже переполнение-x: показано?   -  person Sam Gurdus    schedule 09.10.2017
comment
вы можете попробовать text-overflow: ellipsis; это добавит ... в конец нашего текста   -  person LSKhan    schedule 09.10.2017

Ответы (2)


arrow_upward
1
arrow_downward

Можете ли вы установить высоту? Если вы сделаете это и скроете переполнение, оно должно показывать только то, что вы хотите.

p.test {
    width: 11em; 
    border: 1px solid #000000;
    word-wrap: break-word;
    overflow: hidden;
    height: 1em;
}
<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

person Scath    schedule 09.10.2017

arrow_upward
1
arrow_downward

Попробуйте использовать Html

<div>
This is my div and it has some fixed width only allow text to show in one line
</div>

CSS

   div{
  width: 120px;
  color :black;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

Здесь работает скрипт

person LSKhan    schedule 09.10.2017