I. Introduction
On the daily development display page, if the amount of a piece of text is too long, it may not be fully displayed due to the width of the element. In order to improve the user experience, we need to display the overflowing text as an ellipsis at this time.
For text overflow, we can divide it into two forms:
- Single line text overflow
- Multi-line text overflow
2. Implementation method
Single line text overflow omission
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 ellipses.
The implementation is also very simple. The css attributes involved are:
- text-overflow : Specifies that when the text overflows, an ellipsis symbol is displayed to represent the trimmed text.
- white-space : Set the text to be displayed on one line and cannot wrap lines.
- overflow : If the text length exceeds the limited width, the excess content will be hidden.
Overflow is set to hidden . Generally, it is used to hide internal overflow elements on the outer layer of block-level elements, or it can be used with the following two attributes to achieve text overflow omission.
white-space:nowrap , the function is to set the text without line wrapping, which is the basis for overflow:hidden and text-overflow : ellipsis to take effect
The text-overflow attribute values are as follows:
- clip : When the text in the object overflows, it is cropped
- ellipsis : Displays an ellipsis mark (…) when the text within the object overflows
text-overflow can only take effect when overflow:hidden and white-space:nowrap are set .
for example
<p 这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本</p >
<style>
p{
overflow: hidden;
line-height: 40px;
width:400px;
height:40px;
border:1px solid red;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
as follows:
Multi-line text overflow omission
When multi-line text overflows, we can divide it into two situations:
- Truncated based on height
- Truncate based on row number
Truncated based on height
Pseudo element + positioning
The core css code structure is as follows:
- position: relative: Absolutely position the pseudo-element
- overflow: hidden: The text overflows the limited width and the content is hidden)
- 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:
<body>
<div class='demo'>这是一段很长的文本</div>
</body>
<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>
Use pseudo elements to absolutely position the end of the line and cover the text, and then use overflow: hidden to hide the excess text.
This implementation has the following advantages :
- Good compatibility and good support for major mainstream browsers
- Responsive truncation, adjust according to different widths
When general text exists in English, you can set word-break: break-all to enable a word to be split when a new line breaks.
The pure CSS implementation of truncation based on the number of lines
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 be combined with other WebKit properties)
- display: -webkit-box: used in combination with 1 to display the object as a flexible box model
- -webkit-box-orient: vertical: Used in combination with 1 to set or retrieve the arrangement of child elements of the flex box object
- overflow: hidden: The text overflows the limited width and the content is hidden.
- text-overflow: ellipsis: In the case of multi-line text, use the ellipsis "..." to hide the text that exceeds the range.
<p>
这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
</p >
<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>
The above uses the CSS attribute extension of webkit , so the compatible browser range is the webkit core browser on the PC side. Since most mobile terminals use webkit, this form is commonly used on mobile terminals.
It should be noted that if the text is a long paragraph of English or numbers, you need to add the word-wrap: break-word attribute
You can also use JS to cooperate with CSS . 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 JS structure is as follows:
$(function(){
//获取文本的行高，并获取文本的高度，假设我们规定的行数是五行，那么对超过行数的部分进行限制高度，并加上省略号
$('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");
}
});
})
3. The omitted style that implements single-line/multi-line text overflow has the following advantages and disadvantages:
advantage:
- Simple and easy to use : It is relatively simple to implement and only requires a small number of CSS properties to achieve the effect.
- Improve user experience : display more text content in a limited space, reduce page scrolling and vertical space occupation, and improve the user's reading experience.
- Increase page beauty : Omit and display excessively long text to prevent text content from exceeding the container boundary, making the page look neater and more beautiful.
shortcoming:
- Only supports some browsers : The omitted style of multi-line text overflow is currently only supported in WebKit browsers. Other browsers need to use other technologies to implement, such as JavaScript.
- Unable to display the complete content : Because the omitted text is hidden, users cannot directly view the complete text content and may need to display the complete content through other methods or interactions.
- Not suitable for certain scenarios : The ellipsis style of single-line/multi-line text overflow is suitable for short titles, summaries, etc., but may not be suitable for situations where complete detailed content needs to be displayed, such as long articles or rich text editors.
In summary, the omitted style for single-line/multi-line text overflow has certain advantages in improving user experience and page aesthetics, but it also has limitations such as browser compatibility and incomplete content display. When choosing to use it, you need to weigh it based on specific needs and usage scenarios.
4. The omission style for single-line/multi-line text overflow is mostly suitable for the following scenarios:
- Title : When the title text is too long, using the elliptical style can make the title display more concise without affecting the user's ability to view the complete title through other methods.
- Summary : Summary text is usually shorter, but when some summary content is too long, using an elliptical style can make the page more beautiful.
- Card layout: In a card layout, each card can usually only hold limited text content, so using omitted styles can save space and improve the layout effect.
- Lists of comments, messages , etc.: User-generated text such as comments and messages may be too long. Using an omitted style can prevent the page from being too long and allow users to expand the complete comment by clicking or other interactive methods.
It should be noted that the ellipsis style for single-line/multi-line text overflow does not apply to all scenarios. This style is not recommended for situations where complete and detailed content needs to be displayed, such as long articles, rich text editors, etc. In addition, factors such as specific page layout and design requirements need to be considered during actual use.