How to make the text do not stretch the tabular div, which is set in percent?

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>None</title> <link rel="stylesheet" href="/node_modules/normalize.css/normalize.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> .ceneral_conteiner { background-color: grey; } .conteiner_right{ display: table-cell; width: 0; } .conteiner_left{ display: table-cell; width: 100%; background: red; } .con_item_left { display: inline-block; width: 30px; height: 90px; background: green; vertical-align: top; } .con_item_right { display: inline-block; width: 98%; height: 100px; vertical-align: top; background-color: blue; } </style> </head> <body> <div class="ceneral_conteiner"> <div class="conteiner_right"> <div class="con_item_left"></div> </div> <div class="conteiner_left"> <div class="con_item_right">ะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะต</div> </div> </div> </body> </html>

    2 answers 2

    Just add word-break: break-all; in .con_item_right{}

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

    • In! Gut like i missed it. Thank. - Yuri Svetlov

      <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>None</title> <link rel="stylesheet" href="/node_modules/normalize.css/normalize.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> .ceneral_conteiner { display: table; background-color: grey; table-layout: fixed; } .conteiner_right{ display: table-cell; vertical-align: top; width: 2%; } .conteiner_left{ display: table-cell; vertical-align: top; width: 98%; background: red; } .con_item_left { display: inline-block; width: 100%; background: green; word-break: break-all; } .con_item_right { display: inline-block; width: 100%; background-color: blue; word-break: break-all; } </style> </head> <body> <div class="ceneral_conteiner"> <div class="conteiner_right"> <div class="con_item_left"></div> </div> <div class="conteiner_left"> <div class="con_item_right">ะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะตะต</div> </div> </div> </body> </html>

    Take a close look at CSS for a lot of mistakes.

    • With accent please on mistakes. It is interesting to see. - borodatych
    • @Shnur Tell me please, what are the mistakes? - Yury Svetlov
    • @Shnur Oh, by the way, you provided code for other functionality. You have two blocks in percent in width, and I have one in fixed width, and the second in percent. - Yuri Svetlov
    • display: inline-block; vertical-align: top; will not work together vertical-align works only with tables (td or display: table-cell). If you use a table, then you need to set 98% of the cell, not the element in the cell, these are different things. You also need a table type DIV. Further, if you are already doing table DIV, follow the rules of the tables table> td at least that way, because some opportunities cut down on the vine. - Shnur
    • @Shnur 1. display: inline-block; vertical-align: top; - check for some reason it works for me. Even in the example that I gave. 2. ะ•ัะปะธ ะฒั‹ ะธัะฟะพะปัŒะทัƒะตั‚ะต ั‚ะฐะฑะปะธั†ัƒ, ั‚ะพ ะฝัƒะถะฝะพ ะทะฐะดะฐะฒะฐั‚ัŒ 98% ัั‡ะตะนะบะต, ะฐ ะฝะต ัะปะตะผะตะฝั‚ัƒ ะฒ ัั‡ะตะนะบะต, ัั‚ะพ ั€ะฐะทะฝั‹ะต ะฒะตั‰ะธ. - you did not carefully read the question, and gave the wrong answer, and wrong comment to the answer, which contradicts the functionality of the initial algorithm. I need to set 98% to an element but not cells. table > td With divs, this is not necessary. - Yuri Svetlov