overflow-x text-overflow in span

Question

 .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?

answers aren't displayed during the review of questions in triage. — curt, Dec 13 '16 at 17:10

Daerik · Accepted Answer · 2016-12-13T16:51:30.077

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;.

I just set `width` and `display:inline-block` thanks! – Chien Darus Dec 13 '16 at 17:09 — Chien Darus, Dec 13 '16 at 17:09

score 1 · Answer 2 · answered Dec 13 '16 at 16:49

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;

}

score 0 · Answer 3 · answered Dec 13 '16 at 16:46

0

span has to have either block or inline-block display because otherwise it's just an inline element.

answered Dec 13 '16 at 16:46

user2318546

21
5

score 0 · Answer 4 · edited May 23 '17 at 11:53

0

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/

edited May 23 '17 at 11:53

Community

1
1

answered Dec 13 '16 at 16:48

Andre Rodrigues

253
3
6

overflow-x text-overflow in span

4 Answers4