Html Question posted in
Some basic documentation can be found here.

text-overflow: ellipsis for a div with HTML tags

I have a case in a div that will contain some HTML tags, it will have paragraphs and lists. For examples:

<div class="article-block">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <ul>
        <li>Some text #1</li>
        <li>Some text #2</li>
        <li>Some text #3</li>
    </ul>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>

I want the content in the div will apply text-overflow: ellipsis if it overflows the div’s size. So what I have tried:

.article-block {
    width: 92mm;
    height: 85mm;
    margin-top: 2mm;
    overflow: hidden;
    text-overflow: ellipsis;
}

The result will look like this:

enter image description here

I expected that it would look like this, there will be the "…" at the end:

enter image description here

Can I have some hints on how to achieve this? Thanks!

FYI: Only CSS or HTML, no JS.

Tags:

2

Answers


  1. 0

    Firstly,this property should applied to the text element like p not the parent div,

    Secondly this property will not work unless you set overflow and white-space to the text element.

    overflow: hidden;
white-space: nowrap;

    .article-block {
  padding:5px;
    width: 80mm;
    height: 85mm;
    margin-top: 2mm;
    border:1px solid red;
}
p {
    overflow:hidden;
    white-space:nowrap;
    text-overflow: ellipsis;
}
    <div class="article-block">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <ul>
        <li>Some text #1</li>
        <li>Some text #2</li>
        <li>Some text #3</li>
    </ul>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
    Login or Signup to reply.
  2. 0

    The text-overflow property needs to be attached to the text elements like P, h1-h6 themselves and not a div that’s a container element. also needs to have the white-space:nowrap property set alongside the overflow and text-overflow. Has to be block elements too, so you add display: block in the case of span elements.

    
    <div >
        <p class="article-block">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <ul>
            <li>Some text #1</li>
            <li>Some text #2</li>
            <li>Some text #3</li>
        </ul>
        <p class="article-block">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>


    
.article-block {
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  max-width:400px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search