Implement the text-overflow: ellipsis style in a <li> element to truncate text after two lines

Question

Implement the text-overflow: ellipsis style in a <li> element to truncate text after two lines

I need help with creating a list where each item has a dynamic length. The maximum amount of lines for each item should be 2, and if the text overflows those 2 lines, it should end with dots. I know that using "white-space: nowrap;" can prevent wrapping, but how do I specify the 2 line limit? Any suggestions would be greatly appreciated.example

  li {
    line-height: 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100px;
    border: 2px solid #ff0000;
  }

<ul>
  <li>long long name</li>
  <li>long long name long long name</li>
  <li>long long name long long name long long name</li>
</ul>

html css

Answer 1

Answer №1

Feel free to check out my fiddle example.

In my solution, I utilized pseudo elements to strategically place an ellipsis at the end of every other line. To ensure a smooth visual transition, I incorporated a fading gradient background that prevents cutting off complete words.

CSS Styles

.list-item {
    width:100px;
    max-height: 50px;
    line-height: 25px;
    border:2px solid #ff0000;
    position: relative;
    overflow: hidden;
}

.list-item:after {
    content:"...";
    position: absolute;
    top: 25px;
    right: 0px;
    z-index: 2;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 30%, #fff 100%);;
}

Answer 2

Feel free to check out my fiddle example.

In my solution, I utilized pseudo elements to strategically place an ellipsis at the end of every other line. To ensure a smooth visual transition, I incorporated a fading gradient background that prevents cutting off complete words.

CSS Styles

.list-item {
    width:100px;
    max-height: 50px;
    line-height: 25px;
    border:2px solid #ff0000;
    position: relative;
    overflow: hidden;
}

.list-item:after {
    content:"...";
    position: absolute;
    top: 25px;
    right: 0px;
    z-index: 2;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 30%, #fff 100%);;
}

Implement the text-overflow: ellipsis style in a <li> element to truncate text after two lines

Answer №1

Similar questions

Utilizing CSS Grid to arrange child elements inside their respective parent containers

Recently, there has been an issue with the size of SVG images specifically on Android Chrome

Ways to incorporate text using css within a textarea?

I am having trouble getting my callbacks to properly function with Ajax. It appears that the callback is not being waited for, can someone please advise me on what steps I may be missing?

Utilizing jQuery to clear out data sent through the $.post

When I click on a tab section to expand it, the carat arrows all point upwards. Only the arrows corresponding to the selected section should

What is the best way to change an HTML string into JSON using PHP?

Python: Utilizing the requests library to handle webpage redirections

Guide on aligning a division within another division?

Illuminated container with shading

Use CSS alignment to combine both the profile picture and title on a webpage

Preventing duplicate Google indexing with .htaccess

I'm looking for a more efficient and graceful way to implement jquery .slideToggle on numerous hidden divs. Any suggestions?

HTML automatically removes added elements

Retrieve form data (from a standard form submission) with jQuery

Trigger an immediate Primefaces update using a JavaScript function

Conceal the browser scrollbars

The navigation bar on the website highlights vibrant green arrows next to the

Switch to using addresses instead of latitude and longitude coordinates when utilizing the Google Maps API

Styling only for Angular 2 Components