2

I can't get text-overflow: ellipsis to work and I hope someone can spot the mistake I can't find. Here is my code:

HTML:

<div class="out">
    <div class="in1"></div>
    <div class="in2">some long random text which should not fit in here</div>
</div>

CSS:

* {
    box-sizing: border-box;
}

.out {
    display: block;
    height: 60px;
    width: 250px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    color: #000;
    background: lightgreen;
}

.in1 {
    height: 60px;
    width: 60px;
    padding: 10px;
    float: left;
    border: 1px solid red;
}

.in2 {
    float: left;
    height: 60px;
    line-height: 60px;
    width: 190px;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 1.1em;
    border: 1px solid blue;
}

JSFiddle: http://jsfiddle.net/59m5e6ex/

I found this, but as far as I can tell, my div meets every requirement.

Community
  • 1
  • 1
vsakos
  • 492
  • 8
  • 19

3 Answers3

6

You need to add white-space: nowrap to the element with ellipsis type of text-overflow. Otherwise, the text is wrapped to the new line every time and no text-overflow is detected.

Here is your working fiddle: http://jsfiddle.net/59m5e6ex/2/

So, you need at least 3 properties to run text-overflow: ellipsis;:

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

Also, if you cannot use any of the needed properties here is the javascript you can use for adding "3 dots" at the end of the text.

/**
 * @param  text          string       - text to shorten
 * @param  maxTextLength int          - desired max length of shorten string
 * @return ret           string       - new shortened string
 */
function shorten(text, maxTextLength) {
    var ret = text;
    if (ret.length > maxTextLength) {
        ret = ret.substr(0,maxTextLength-3) + "...";
    }
    return ret;
}

It would return a new string with the specified maximum length. But of course, it will change its value. More in this topic can be found here

TheParam
  • 10,113
  • 4
  • 40
  • 51
Dawid Zbiński
  • 5,521
  • 8
  • 43
  • 70
2

You need 

white-space: nowrap;

in your in2 class, else the text wraps onto a new line.

See https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ for more details. :)

ash
  • 282
  • 1
  • 6
-1

just add white-space:nowrap; in .in2; See this example from w3schools: https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

Ken
  • 57
  • 1
  • 9