CSS Text Ellipsis When Using Variable Width Divs

CSS text ellipsis when using variable width divs

You can use CSS3's flexible box layout to do this pretty intuitively:

.parent-div {
    display: flex;
}

.text-div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    

    min-width: 0;
}

.icon-div {
    flex: 1;
}

Demo: http://jsfiddle.net/Blender/kXMz7/1/

Text overflow ellipsis on dynamic width element

Just add max-width: 100% to the element in order to achieve what you're after. The reason that you need some kind of width set is that the element will continue to expand until you tell it that it can't.

Here's a JSFiddle Example.

.bar {
    float: left;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    
    /* new css */
    max-width: 100%;
}

#Edit – Flexbox edition

So, here's a flexbox display. You're going to need to shim for IE8 using a library like this: https://github.com/sfioritto/real-world-flexbox/tree/master/demos/flexie

Here's the fix for browsers that don't suck:

CSS Update

.container {
    border: 1px solid #ccc;
    display: flex;
    flex-direction: row;
    padding: 30px 15px;
    width: 100%;
}

.cell {
    flex: 1 1 33%;
    vertical-align: middle;
}

.col-1 {
    width: 25%;
    }
.col-1 h1 {
  margin: 0;
  padding: 0;
}

.col-2 {
    width: 50%;
    }
.col-2 ul {
  margin: 0;
  padding: 0;
}

.col-2 li {
  float: left;
  list-style: none;
  margin-right: 10px;
}

.col-3 {
    width: 25%;
    display: flex;
    flex-direction: row;
}
.col-3 .foo {
  flex: 0 1 auto;
}
.col-3 .foo img {
  display: block;
  margin: 0;
  padding: 0;
}
    
.col-3 .bar {
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 2 auto;
}
    
.col-3 .baz {
  background: #ccc;
  height: 50px;
  line-height: 50px;
  padding: 0 5px;
  flex: 1 1 auto;
}

JSFiddle Example

Dynamic width div and ellipsis text

What about something like this, which addresses both issues:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.container {
    height: 60px;
    padding-top: 5px;
    padding-bottom: 5px;
    min-width: 340px;
}

.container .blockA {
    width: 54px;
    height: 100%;
    float: left;
    display: block;
    background-color: #ff00ff;
}

.container .blockB {
    width: 50px;
    height: 100%;
    float: left;
    display: block;
    background: #df8505;
}

.container .blockC {
    height: 100%;
    display: block;
    background: #ff7d7b;
}

.container .blockC_container p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lineA, .lineB {margin: 0;}

.container .blockC .lineA {
    line-height: 2.0em;
    font-weight: bold;
}

.container .blockC .lineB {
    line-height: 1.0em;
}

.container .blockD {
    width: 64px;
    height: 100%;
    float: right;
    display: block;
    background: #df8505;
}

</style>
</head>
<body>

<div class="container">
    <div class="blockA">A</div>
    <div class="blockB">B</div>

    <div class="blockD">
            <span>D</span>
    </div>

    <div class="blockC">
        <div class="blockC_container">
            <p class="lineA">Text text text from line A</p>
            <p class="lineB">Text text text text text from line B Text text text text text from line BText text text text text from line BText text text text text from line B</p>
        </div>
    </div>

    <div stye="clear:both"></div>
</div>

</body>
</html>

There are other ways to get the third column to take up all the space, but placing it after the other column in the HTML and removing its float is the easiest.

How can I get text-overflow to work in container with dynamic width?

Adding min-width probably solves the problem:

.ui-g {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    
    min-width: 0px;   /* add ths */
}

.ui-g-12 {
    width: 100%;
    float: left;
    box-sizing: border-box;
    
    min-width:0px;    /* add this */
}

Only two lines to add to your OP code.
https://jsfiddle.net/9aq34rt7/

Resize the browser window see it adjusts. Hope this solves the issue in actual code.

found a nice article explaining the issue: https://newbedev.com/css-text-overflow-ellipsis-not-working

css: how to have a variable column size with text overflow ellipsis

Finally got this to work... The solution was (no html change was required):

http://jsfiddle.net/AjZDx/2/

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: table;
    border-spacing: 6px 0px;
}

li {
    display: table-cell;
    background-color: red;
    min-width: 20px;
    width: 120px;
}

li.fixed {
    width: 100px;
    min-width: 100px;
    text-align: center;
}

ul > li > div {
    display: table;
    border-spacing: 0px 0px;
    table-layout: fixed;
    width: 100%;
}

ul > li > div > span {
    display: table-cell;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

dynamic width span with text overflow

Check this plunker:

https://jsfiddle.net/42khut93/3/

You need to set max-width for both the label and content classes
and adjust the padding in percentage.

Also set the .content display to block or inline-block

.row {  width: 50%;  border: 1px solid black;}.wrapper {  text-align: left;}.label {  display: inline-block;  margin-top: 10px;  margin-right: 4px;  padding: 0 1%;            //in percentage  border-radius: 4px;  color: white;  background-color: grey;  height: 20px;  vertical-align: middle;  font-size: 14px;  max-width: 98%;          //max-width 100% - 1% padding + 1% padding  }.content {  display: block;  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;  max-width: 100%;         // set max-width}

<div class="row">  <div class="wrapper">
    <div class="label">      <span class="content">text</span>    </div>
    <div class="label">      <span class="content">longer text label</span>    </div>
    <div class="label">      <span class="content">Another label</span>    </div>
    <div class="label">      <span class="content">A very very very very very very long text label that should fit inside row and cut the text and show ellipsis...</span>    </div>
  </div></div>

Crop text using ellipsis on a variable length element

Just remove width: 100% from your flex implementation (.a1 class).

.a0 {  display: flex;  height: 50px;  width: 300px;  border: 2px solid #000;  margin-bottom: 10px;}
.a1 {  display: inline-block;  vertical-align: middle;  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;}
.a2 {  display: inline-block;  vertical-align: middle;  white-space: nowrap;  color: #888;}
.b0 {  display: block;  height: 50px;  width: 300px;  border: 2px solid #000;  margin-bottom: 10px;}
.b1 {  display: inline-block;  vertical-align: middle;  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;}
.b2 {  display: inline-block;  vertical-align: middle;  white-space: nowrap;  color: #888;}

<h3>Using Flex (Desired effect for long text)</h3><div class="a0">  <div class="a1">Short text</div>  <div class="a2">(Always Visible)</div></div>
<div class="a0">  <div class="a1">Long text Long text Long text Long text </div>  <div class="a2">(Always Visible)</div></div>
<h3>Using Inline block (Desired effect for short text)</h3><div class="b0">  <div class="b1">Short text</div>  <div class="b2">(Always Visible)</div></div>
<div class="b0">  <div class="b1">Long text Long text Long text Long text </div>  <div class="b2">(Always Visible)</div></div>

text-overflow ellipsis does not work with dynamic width

Had display: table; in first div which was causing troubles with the ellipsis. If you delete this then the ellipsis works fine.

I wont delete the question it may help someone

Check it working here: http://jsfiddle.net/vNRpw/6/

CSS text ellipsis and 100 percent width

Try this out:

.titleContent {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Here's and updated jsFiddle

CSS Text Ellipsis When Using Variable Width Divs