0

Когда использую display: table-cell и white-space: normal, красная таблица растягивается и в её правой части образуется пустота. Как от этого избавиться? В качестве примера привёл ещё один код, где красная таблица не растянута.

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

.ceneral_conteiner {
  background-color: grey;
}
.conteiner_right{
  display: table-cell;
  width: 100%;
  max-width: 100%;
  background: red;
}
.conteiner_left{
  display: table-cell;
  width: 0;
}
.con_item_left {
  display: inline-block;
  width: 30px;
  height: 90px;
  background: green;
  vertical-align: top;
  word-break: break-all;
}
<div class="ceneral_conteiner">
  <div class="conteiner_left">
     <div class="con_item_left"></div>
  </div>

  <div class="conteiner_right">
    <div style="width: 50%; 
                table-layout: fixed; 
                overflow: hidden; 
                text-overflow: clip; 
                white-space: normal; 
                display: block;">
      <div style="height: 30px; 
                  width: 50%; 
                  display: block; 
                  background-color: blue;
                  overflow: hidden;  
                  text-overflow: ellipsis; 
                  word-wrap: break-word; 
                  white-space: nowrap;">
        нннннrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyнннннrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
      </div>
    </div>
  </div>
</div>

Во втором коде текст не растягивает таблицу

.ceneral_conteiner {
  background-color: grey;
}
.conteiner_right{
  display: table-cell;
  width: 100%;
  max-width: 100%;
  background: red;
  word-break: break-all;
}
.conteiner_left{
  display: table-cell;
  width: 0;
}
.con_item_left {
  display: inline-block;
  width: 30px;
  height: 90px;
  background: green;
  vertical-align: top;
  word-break: break-all;
}
<div class="ceneral_conteiner">
  <div class="conteiner_left">
    <div class="con_item_left"></div>
  </div>
  <div class="conteiner_right">
    3333333333333333333334кккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккцццццццццццццццццццццццццццццццццццццццццццццццццццццццццццккккккккккккккккккккккккккккккппппппппппппппппппппппппппппппппппппппппппп
  </div>
</div>

3
  • Юрий, поясните, как должен выглядеть результат? Что именно в первой таблице называете пустотой? Чем не устраивает второй код? 2 мая 2016 в 19:08
  • @Gleb Kemarsky Вот, пожалуйста, я отредактировал свой вопрос, добавив необходимые детали. Если что-то будет не понятно, я объясню, пишите. 2 мая 2016 в 19:17
  • @Gleb Kemarsky Чем не устраивает второй код? - Нужно чтобы текст был в одну строку, обрезался по ширине блока и ставились многоточия в конце обрезания текста. 2 мая 2016 в 19:19

1 ответ 1

1

Вариант 1. Блоки без display:table-cell;

text-overflow работает внутри блока, у которого overflow установлено как auto, scroll или hidden. См. https://webref.ru/css/text-overflow

В связи с этим предлагаю решение без display: table-cell; и white-space: normal;. Такой вариант решает задачу?

.ceneral_conteiner {
  background: red;
  height: 90px;
}
.conteiner_right {
  overflow: hidden;
  text-overflow: ellipsis;
}
.conteiner_left {
  background: green;
  float: left;
  height: 90px;
  width: 30px;
}
<div class="ceneral_conteiner">
  <div class="conteiner_left">
  </div>
  <div class="conteiner_right">
3333333333333333333334кккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккккцццццццццццццццццццццццццццццццццццццццццццццццццццццццццццккккккккккккккккккккккккккккккппппппппппппппппппппппппппппппппппппппппппп
  </div>
</div>

Вариант 2. HTML-таблица

Попробовал варианты и делаю вывод, что text-overflow работает для блока с display:table-cell;, если ширина блока задана в пикселях, и не работает, если ширина задана в процентах. Но если заменить блоки на стандартные табличные элементы, то проценты тоже вступают в игру.

table {
  background: grey;
  border: 0 solid;
  border-collapse: collapse;
  height: 90px;
  width: 100%;
}
tr {
  vertical-align: top;
}
td {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
td.td-left {
  background: green;
  width: 30px;
}
td.td-right {
  background: red;
}
<table>
<tr>
  <td class="td-left">more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more</td>
  <td class="td-right">more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more</td>
</tr>
</table>

https://jsfiddle.net/glebkema/e18qtjz0/

6
  • нужно именно с display: table-cell. 3 мая 2016 в 3:16
  • @ЮрийСветлов Попробовал варианты и делаю вывод, что text-overflow работает для блока с display:table-cell;, если ширина блока задана в пикселях, и не работает, если ширина задана в процентах. Но если заменить блоки на стандартные табличные элементы, то проценты тоже вступают в игру. Добавил в ответ пример кода. 3 мая 2016 в 7:53
  • 1
    Спасибо, но можно сделать и более хитро - width: 0; min-width: 100%; 3 мая 2016 в 8:05
  • 1
    Вот - jsfiddle.net/sqekq30p/3 3 мая 2016 в 9:18
  • 1
    @ЮрийСветлов Ух ты, спасибо! Пробовал заворачивать текст в блок, но без такого трюка это не срабатывало. После вашей подсказки нашёл его на англоязычном оверфлоу. 3 мая 2016 в 9:24

Ваш ответ

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

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