How to use CSS to make the text display only one line and replace it with an ellipsis

Question

currently I have a requirement that I need to display a block of articles at most one line, and the excess part needs to be replaced with ellipsis... The

generally recommended method on the Internet is as follows:

white-space: nowrap;
overflow: hidden ;
text-overflow: ellipsis;

But because of my layout, I don’t know why using white-space: nowrap; will cause confusion in the layout, so I am looking for it to meet this requirement, but I don’t use white-space: nowrap; this Properties, other CSS methods!

If you have other javascript methods that can be done, you are also welcome to provide your valuable comments, thank you.

.text-line{
            height: 100px;
            background-color: #AAA8A8;
            display: inline-block;
            width: 300px;
            color: #000;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

<div class="text-line">loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlorem</div>

score 0 · Answer 1 · answered Jan 06 '22 at 07:06

You can do it with CSS, but it is far from the cleanest:

div {
  position: relative;
  display: block;
  overflow: hidden;
  
  width: 300px;
  
  --height: 1.2em;
  line-height: var(--height);
  height: var(--height);
}

div:after {
  bottom: 0;
  right: 0;
  position: absolute;
  content: "..."
}

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Anything more accurate will require JavaScript, as text-overflow: ellipsis; requires white-space: nowrap, sadly.

How to use CSS to make the text display only one line and replace it with an ellipsis

1 Answers1