(1 question of the day) Interviewer: How to implement the ellipsis style of single-line/multi-line text overflow?

I. Introduction

In the daily development and display page, if the amount of text is too long, it may not be fully displayed due to the factor of the element width. In order to improve the user experience, we need to display the overflowing text as an ellipsis.

For the overflow of text, we can divide it into two forms:

Single line text overflow
Multiline text overflow

2. Implementation method

Single-line text overflow omitted

The understanding is also very simple, that is, the text is displayed in one line, and the excess part is displayed in the form of ellipsis

The implementation method is also very simple, and the css properties involved are:

text-overflow: specifies that when the text overflows, an ellipsis is displayed to represent the trimmed text
white-space: Set the text to be displayed on one line and cannot wrap
overflow: If the length of the text exceeds the limited width, the content that exceeds the limit will be hidden.

overflow is set to hidden, which is usually used in the outer layer of block-level elements to hide inner overflow elements, or with the following two properties to achieve text overflow omission

white-space:nowrap, the function is to set the text to not wrap, which is the basis for overflow:hidden and text-overflow:ellipsis to take effect

The text-overflow property values are as follows:

clip: When the overflowing part of the text in the object is cut off
ellipsis: show ellipsis markers (…) when text inside objects overflows

text-overflow can only take effect when overflow:hidden and white-space:nowrap are set

for example

<style>
    p{
        overflow: hidden;
        line-height: 40px;
        width:400px;
        height:40px;
        border:1px solid red;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
<p this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text</p >

The effect is as follows:

It can be seen that it is relatively simple to set a single-line text overflow, and the position of the ellipsis is better displayed

Multiline text overflow omitted

When multi-line text overflows, we can divide it into two cases:

truncation based on height
Truncate based on row count

truncation based on height

Pseudo element + positioning

The core css code structure is as follows:

position: relative: absolute positioning for pseudo elements
overflow: hidden: the text overflows the limited width to hide the content)
position: absolute: Absolutely position the ellipsis
line-height: 20px: Combined with the height of the element, when the height is fixed, set the line height and control the number of displayed lines
height: 40px: Set the height of the current element
::after {} : set the ellipsis style

The code looks like this:

<style>
    .demo {
        position: relative;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
    }
    .demo::after {
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 0 10px;
    }
</style>

<body>
    <div class='demo'>This is a very long text</div>
</body>

The implementation principle is well understood. It is to absolutely position the pseudo element to the end of the line and cover the text, and then use overflow: hidden to hide the extra text.

This implementation has the following advantages:

Good compatibility, good support for major mainstream browsers
Responsive truncation, adjust according to different widths

When the general text exists in English, you can set word-break: break-all to enable a word to be split at line break

Truncate based on row count

Pure css implementation is also very simple. The core css code is as follows:

-webkit-line-clamp: 2: used to limit the number of lines of text displayed in a block element, in order to achieve this effect, it needs to combine other WebKit properties)
display: -webkit-box: used in combination with 1 to display the object as an elastically scalable box model
-webkit-box-orient: vertical: used in combination with 1 to set or retrieve the arrangement of the child elements of the flexbox object
overflow: hidden: the text overflows the limited width to hide the content
text-overflow: ellipsis: In the case of multi-line text, use ellipsis "..." to hide the text that overflows the range

<style>
    p {
        width: 400px;
        border-radius: 1px solid red;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
<p>
    this is some text this is some text this is some text this is some text this is some text
    this is some text this is some text this is some text this is some text this is some text
</p >

It can be seen that the above uses the CSS property extension of webkit, so the compatible browser range is the browser with the webkit core on the PC side. Since most of the mobile terminals use webkit, this form is often used on the mobile terminal.

It should be noted that if the text is a long period of English or numbers, you need to add the word-wrap: break-word attribute

You can also use javascript to cooperate with css, and the implementation code is as follows:

The css structure is as follows:

p {
    position: relative;
    width: 400px;
    line-height: 20px;
    overflow: hidden;

}
.p-after:after{
    content: "..."; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -moz-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(left, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}

The javascript code is as follows:

$(function(){
 //Get the line height of the text, and get the height of the text, assuming that the number of lines we specify is five lines, then limit the height of the part that exceeds the number of lines, and add an ellipsis
   $('p').each(function(i, obj){
        var lineHeight = parseInt($(this).css("line-height"));
        var height = parseInt($(this).height());
        if((height / lineHeight) >3 ){
            $(this).addClass("p-after")
            $(this).css("height","60px");
        }else{
            $(this).removeClass("p-after");
        }
    });
})

references

https://www.zoo.team/article/text-overflow
https://segmentfault.com/a/1190000017078153

Tags: css Javascript Front-end

Posted by tdelobe on Sat, 08 Oct 2022 06:42:46 +0530

Programs Team