When I use display: table-cell and white-space: normal , the red table is stretched and emptiness is formed in its right side. How to get rid of it? As an example, cited another code where the red table is not stretched.

It is necessary that the text be in one line, cut to the width of the block and ellipsis should be set at the end of the cutting of the text.

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

In the second code, the text does not stretch the table.

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

  • Yuri, explain how the result should look? What exactly do you call emptiness in the first table? What is not satisfied with the second code? - Gleb Kemarsky
  • @Gleb Kemarsky Here you are, I edited my question by adding the necessary details. If something is not clear, I will explain, write. - Yury Svetlov
  • @Gleb Kemarsky Чем не устраивает второй код? - It is necessary that the text be in one line, cut to the width of the block and ellipsis set at the end of cutting the text. - Yury Svetlov

1 answer 1

Option 1. Blocks without display:table-cell;

text-overflow works inside a block whose overflow set to auto , scroll or hidden . See https://webref.ru/css/text-overflow

In this regard, I propose a solution without display: table-cell; and white-space: normal; . This option solves the problem?

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

Option 2. HTML table

I tried the options and concluded that text-overflow works for a block with display:table-cell; if the block width is specified in pixels, and does not work if the width is specified in percent. But if you replace the blocks with standard table elements, the percentages also come into play.

 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/

  • It is necessary with display: table-cell. - Yuri Svetlov
  • @YuriSvetlov I tried the options and concluded that text-overflow works for a block with display:table-cell; if the block width is specified in pixels, and does not work if the width is specified in percent. But if you replace the blocks with standard table elements, the percentages also come into play. Added in the answer sample code. - Gleb Kemarsky
  • one
    Thanks, but you can make it more tricky - width: 0; min-width: 100%; width: 0; min-width: 100%; - Yuri Svetlov
  • one
    Here is jsfiddle.net/sqekq30p/3 - Yuri Svetlov
  • one
    @ YuriSvetlov Wow, thank you! I tried to wrap the text in the block, but without such a stunt it did not work. After your prompting, I found it in an English overflow . - Gleb Kemarsky