.whysolong {
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Put in div
<div class="whysolong">So many people here but only 3 or four global apps grow UP?</div>
OK!
So many people here....
and span
<span class="whysolong">So many people here but only 3 or four global apps grow UP?</span>
Still showing full text..
So many people here but only 3 or four global apps grow UP?
Why?
Text overflow can only happen on block or inline-block level elements, because the element needs to have a width in order to be overflow-ed. The overflow happens in the direction as determined by the direction property or related attributes.
.whysolong {
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 154px;
}
.whysolongblock {
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 154px;
display: block;
}<div class="whysolong">So many people here but only 3 or four global apps grow UP?</div>
<span class="whysolong">So many people here but only 3 or four global apps grow UP?</span>
<div class="whysolongblock">So many people here but only 3 or four global apps grow UP?</div>
<span class="whysolongblock">So many people here but only 3 or four global apps grow UP?</span>Note: text-overflow only occurs when the container's overflow property has the value hidden, scroll or auto and white-space: nowrap;.
width and display:inline-block thanks!Property text-overflow applies to block container elements only. A <span> element is inline element by default, therefore it doesn't support this attribute. To make <span> support text-overflow you need to define it as block-level element:
span {
display: block;
text-overflow: ellipsis;
}
span has to have either block or inline-block display because otherwise it's just an inline element.
Exists a differences between DIV and SPAN because one is a Block Element and other is a Inline Element.
You can see: What is the difference between HTML tags <div> and <span>?
http://cssreset.com/understanding-the-difference-between-div-and-span/
