CODEWITHSUNDEEP
htmlcss
Z.Richard
Z.Richard

Reputation: 337

"text-overflow: ellipsis" and "overflow: hidden" doesn't work properly in my <span> and a horizontal scrolling bar appears

I am working on an assignment on Angular. The requirement of the assignment: display the message in a single line, trim all unnecessary part with "...".

I manage to make the message into a single line by adding "white-space: nowrap" in tag, but the multiple lines will become a single line which overflows. Now comes the part the puzzles me. I am supposed to trim the line and add "..." to the overflowing part. Though I have added features such as "text-overflow: ellipsis; overflow: hidden; display: inline-block" to my description class, the line is not trimmed and no "..." appears. Instead, an ugly horizontal scrollbar emerges, and though I manage to get rid of it by adding "overflow-x: hidden" in tag in "index.html", it still doesn't meet the requirement.

      .description {
         width: 100%;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
         display: inline-block;
     }
   </style>
   <img matListAvatar src={{leader.image}} alt={{leader.designation}}>
   <p matline>
     <span>{{leader.name}}<br></span>
     <span>{{leader.designation}}<br></span>
     <span class="description"> {{leader.description}}</span>
   </p>

I want the message to be delivered in a single line, trimmed and added "..." according to the screen size but not according to pixels. Can anyone help me out?

Edit:

The sample in the answer below works just fine. But it is not the situation of my app. enter image description here

I have checked this project with Edge and Chrome on win 10. Doesn't work.

Link to GitHub: https://github.com/Z-Richard/Practice-Angular-Project.git

Please kindly inform me whether this project works or not on your computer.

Upvotes: 1

Views: 1847

Answers (2)

Whatatimetobealive
Whatatimetobealive

Reputation: 1353

I downloaded your code and checked the issue is your parent <p> class does not have width defined so subclass not able to calculate width correctly. So my solution is I basically added <p matline class="contact-info"> class and give it width:98% then everything worked as expected. Here is the the working code for about.component.html

     <mat-list-item>
        <style> .mat-list-item {
              min-height: 100px;
        }
        .contact-info{
          width:98%;
        }
        .description {
          width: 100%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          display: inline-block;
        }
        </style>
      <img matListAvatar src={{leader.image}} alt={{leader.designation}}>
      <p matline class="contact-info">
        <span>{{leader.name}}<br></span>
        <span>{{leader.designation}}<br></span>
        <span class="description"> {{leader.description}}</span>
      </p>
    </mat-list-item>

Let me know if you have any question.

Upvotes: 1

Daniel Sixl
Daniel Sixl

Reputation: 2499

Your code works like a charm for me. I do not think it has anything to do with the styles of your span.

I checked in all major browsers, seems to be ok: https://codepen.io/Sixl/pen/gZRxYR

.description {
   width: 100%;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   display: inline-block;
   background-color: yellow;
}
<p>
<span>Lorem ipsum.</span><br>
<span>dolor sit amet</span><br>
<span class="description">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span>
</p>

Upvotes: 0

Related Questions