How to Use CSS Text-Overflow on Text That's Wrapping

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>

CSS Text doesn't wrap?

It does not wrap because you have a long word with no spaces.

In this case, use:

word-wrap: break-word;

Wrapping long text in CSS

I use the combination

word-wrap: break-word;
overflow: hidden;

to deal with this. The word-wrap setting will allow the word to be wrapped despite its length in browsers which support that property, while the overflow setting will cause it to be cut off at the end of the available space in browsers which don't recognize word-wrap. That's about as graceful of degradation as you're likely to get without going to javascript.

Text overflow ellipsis on two lines

I'm not sure if you have seen this article, but Chris Coyier's excellent CSS-Tricks.com posted a link to this a while back and it's a pure CSS solution that accomplishes exactly what you seek.

(Click to View on CodePen)

html,
body,
p {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.ellipsis {
  overflow: hidden;
  height: 200px;
  line-height: 25px;
  margin: 20px;
  border: 5px solid #AAA;
}

.ellipsis:before {
  content: "";
  float: left;
  width: 5px;
  height: 200px;
}

.ellipsis>*:first-child {
  float: right;
  width: 100%;
  margin-left: -5px;
}

.ellipsis:after {
  content: "\02026";
  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  float: right;
  position: relative;
  top: -25px;
  left: 100%;
  width: 3em;
  margin-left: -3em;
  padding-right: 5px;
  text-align: right;
  background-size: 100% 100%;
  /* 512x1 image,gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC);
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
  background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}

<div class="ellipsis">
  <div>
    <p>
      Call me Ishmael. Some years ago – never mind how long precisely – having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of
      driving off the spleen, and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing
      up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off –
      then, I account it high time to get to sea as soon as I can.
    </p>
  </div>
</div>

CSS prevent DIV from wrapping when using text-overflow: ellipsis

Have you tried flex-box? Based on what I've tested it should work for you. You'll need to wrap your text in another div, though. And also need to change some things from inline-block back to block, etc. Basically flex-box is the new layout engine that allows you to do some awesome stuff. Generally you shouldn't ever need float if you use flex-box. Check out this guide on flex-box from CSS-Tricks. You can do some amazing things with it. Let me know if you have any questions regarding my answer. I didn't want to go into too much specifics because that'd be a pretty big rabbit hole.

.page-container{  width: 400px;  background: yellow;}
/*You don't need this anymore with flex.div.header {    white-space: nowrap;    display: inline;    width: 100%;}*/
/* Updated to use flex box. */div.one-line-div {    display: flex;    flex-direction: row;    font-size: larger;}/* define the style for our .text element */.text {    text-overflow: ellipsis;    overflow: hidden;    white-space: nowrap;}
/* our .move-divs needs to be flex too */.more-divs {    display: flex;    flex-direction: row;}
/* I removed the floats and display inline, since you don't need them */.div1, .div2, .div3, .div4 {    margin-right: 12px;    cursor: pointer;    width: 30px;    height: 30px;    background: blue;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/><body>  <div class="page">    <div class="page-container">      <div class="header">        <div class="one-line-div">          <div class="text">            Text text, so much text here, what do we do with all this text?.          </div>          <div class="more-divs">            <div class="div1">            </div>            <div class="div2">            </div>            <div class="div3">            </div>            <div class="div4">            </div>          </div>        </div>      </div>    </div>  </div></body>

css word wrap with ellipsis

There is a webkit-only feature called "line clamping" that can achieve what I think you're looking for. Unfortunately, it's non-standard, and there are currently no plans (at least that I'm aware of) to make it part of any standard.

https://css-tricks.com/line-clampin/

It would be accomplished using the following CSS:

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
}

With this code, if the element's content fills more than 3 lines with text it will be cut off on the third line with an ellipsis.

There are several different JavaScript libraries that attempt to accomplish similar things, which you can see in the link I've included in this answer. Unfortunately, using standard CSS, text-overflow: ellipsis is limited to just a single line.

Alternatively, there is currently a thread about "region fragments" in the W3C mailing list and how they can be used to make multiline elements have ellipsis, but the spec is still in draft stages and it could be years before it ever makes it into any browsers.

How to wrap text using CSS?

Try doing this. Works for IE8, FF3.6, Chrome

<body>
  <table>
    <tr>
      <td>
        <div style="word-wrap: break-word; width: 100px">gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div>
      </td>
    </tr>
  </table>
</body>