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>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.