Ellipsis not working

Question

I have the following code:

.biz-desc {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 600px;
}

<div class="section-segment">
  <span class="biz-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent faucibus nisi non tellus pharetra, nec tempus mi fringilla. Vestibulum consequat dolor sit amet orci suscipit, id facilisis metus tempus. Maecenas in massa eget nisl porttitor molestie id ut velit. Nullam quis purus porttitor neque fermentum dignissim quis nec felis. Aenean non maximus quam, sit amet tincidunt sapien. Nam ut gravida libero. Quisque tortor ante, maximus sit amet nunc at, convallis posuere felis. Proin venenatis sit amet metus eu porta.</span>
</div>

My idea is that the description will be truncated and will display three dots (...) when the text is too long for the screen.

This is not working, however. I’m just getting long text that gets out from the div's border.

I tried to add max-width: 600px; to .biz-desc but to no avail.

Can anyone see what is the problem or to tell me how to achieve this modest requirement?

Have you tried adding the `biz-desc` class to the `div` or apply the CSS to `.section-segment` instead of `.biz-desc`? — Sebastian Simon, Jan 24 '16 at 08:52
Here are the requirements for ellipsis to work: http://stackoverflow.com/a/33061059/3597276 — Michael Benjamin, Jan 24 '16 at 13:13

score 3 · Accepted Answer · answered Jan 24 '16 at 09:03

From the MDN webpage for text-overflow (bold added for emphasis):

This property only affects content that is overflowing a block container element in its inline progression direction

You need to apply text-overflow to a block container, but you are applying it to an inline container (span). You could solve the problem in two different ways:

Make the span have a display of block/inline-block:
Or apply the text-overflow to the div instead of the span

Guys, you are all have been a great help. Thanks. – dsb Jan 24 '16 at 09:40 — dsb, Jan 24 '16 at 09:40

score 2 · Answer 2 · answered Jan 24 '16 at 09:03

max-width is ignored by inline elements.

There are four possible solutions for this:

either you apply the CSS to .section-segment instead of .biz-desc
or you add the biz-desc class to the <div> (<div class="section-segment biz-desc">)
or you add display: block; or display: inline-block; to the CSS rules
or you change the <span> to a block-level element like <p> or <div>.

score 0 · Answer 3 · 2016-01-24T09:07:18.477

0

All you need to do is change the class and the max-width property like so:

.section-segment{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 600px;
}

Or alternativelly

.biz-desc{
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 600px;
}

edited Jan 24 '16 at 09:07

answered Jan 24 '16 at 09:05

score 0 · Answer 4 · answered Jan 24 '16 at 09:10

0

In my personal experience I suggest you to simply put the text-overflow to the <div> tag .

The problem is with putting that to <span> tag there.

answered Jan 24 '16 at 09:10

Iresha Rubasinghe

913
1
10
27

Ellipsis not working

4 Answers4