Long Word Wrap in Nested Tables

Long word wrap in nested tables

table is taking the table-layout: auto; by default so as per contents increase the width also increases so you need to set table-layout to fixed.

table{
    table-layout: fixed;
}

demo

Boostrap main table cells shrink when text in nested table is too long

The cell width resizes based on the content of other cells in the table. If a row has too much content to display on a single row it may cause elements of some cells to wrap, depending on a cell's ability to wrap.

If you do not want your buttons to wrap, I suggest giving the parent cell a minimum width (e.g. <td style="min-width: 160px">. I have updated your jsfiddle with this answer.

How to prevent text in a table cell from wrapping

Have a look at the white-space property, used like this:

th {
    white-space: nowrap;
}

This will force the contents of <th> to display on one line.

From linked page, here are the various options for white-space:

normal
This value directs user agents to collapse sequences of white space, and break lines as necessary to fill line boxes.

pre
This value prevents user agents from collapsing sequences of white space. Lines are only broken at preserved newline characters.

nowrap
This value collapses white space as for 'normal', but suppresses line breaks within text.

pre-wrap
This value prevents user agents from collapsing sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.

pre-line
This value directs user agents to collapse sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.

CSS text-overflow: ellipsis wrapping on nested div structure

You are very close to your expected result.

Change .inner from inline-block to inline.

.inner {
    display: inline;
}

html, body {
  width: 100%;
}

.outer {
  background-color: lavender;
  display: inline-block;
  max-width: 30%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inner {
  display: inline;
}

.inner>* {
  display: inline;
}

.inner>:first-child::after {
  content: "~"
}

<html>

  <body>
    <div class="outer">
      <div class="inner">
        <div>left1</div>
        <div>right1</div>
      </div>
      <div class="inner">
        <div>left2</div>
        <div>right2</div>
      </div>
      <div class="inner">
        <div>left3</div>
        <div>right3</div>
      </div>
      <div class="inner">
        <div>left4</div>
        <div>right4</div>
      </div>
    </div>
  </body>

</html>

How to break long words in a table td?

I think this solution will help you!

pre {
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}

http://perishablepress.com/press/2010/06/01/wrapping-content/

// Edit

It's been a long time since this was accepted as the best answer and updates are required. See @benhowdle89's and @Steve's answers below.

So the current browser support is now good enough to use word-break in order to allow words to be broken over multiple lines.

word-break: break-all

http://caniuse.com/#feat=word-break

How to wrap text in table cell without wrapping child elements

I believe this is what you need: https://jsfiddle.net/oj141Lpp/1/

Changed the following:

.inline { 
   display: table-cell;
   vertical-align: top;
}

and removed the .nowrap class

CSS: Nested elements without explicit width and word wrap

first, get the styles out of the html; those belong in CSS.

then, I think what you can do is set the div's position to "relative", but leave its width to auto and its overflow to "hidden". The hidden setting should force it to be big enough for all its child elements.

The caption, you then set to position:auto, and bottom:0, left:0, width:100%.

That should accomplish what you're looking for.

Why does my html table 'max-width' not cause text to wrap?

You need to add the CSS3 property word-wrap: break-word;.

Long Word Wrap in Nested Tables