Search code examples
htmlcssellipsis

Ellipsis not working

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?

Solution

  • 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:

    1. Make the span have a display of block/inline-block:

    2. Or apply the text-overflow to the div instead of the span