CSS text-overflow: ellipsis; not working? -

i don't know why simple css isn't working...

css:

.app {     height: 18px;     width: 140px;     padding: 0;     overflow: hidden;      position: relative;     margin: 0 5px 0 5px;      font: bold 15px/18px arial;     text-align: center;     text-decoration: none;     text-overflow: ellipsis;     white-space: nowrap;     color: #fff; } 

html:

<div class="app">     <img src=""></img>     <h1></h1>     <a href=""></a> </div> 

text-overflow:ellipsis; works when following true:

• the element's width must constrained in px (pixels). width in % (percentage) won't work.
• the element must have overflow:hidden , white-space:nowrap set.

the reason you're having problems here because width of a element isn't constrained. have width setting, because element set display:inline (i.e. default) ignoring it, , nothing else constraining width either.

you can fix doing 1 of following:

• set element display:inline-block or display:block (probably former, depends on layout needs).
• set 1 of container elements display:block , give element fixed width or max-width.
• set element float:left or float:right (probably former, again, either should have same effect far ellipsis concerned).

i'd suggest display:inline-block, since have minimum colateral impact on layout; works display:inline it's using far layout concerned, feel free experiment other points well; i've tried give info possible understand how these things interract together; large part of understanding css understanding how various styles work together.

hope helps.

here's jsfiddle code, display:inline-block added, show how close were.

useful references:

• https://developer.mozilla.org/en-us/docs/web/css/text-overflow
• https://developer.mozilla.org/en-us/docs/web/css/white-space