Detailed graphic explanation of CSS text overflow display ellipsis effect (text-overflow)-CSS Tutorial-php.cn

Detailed graphic explanation of CSS text overflow display ellipsis effect (text-overflow)

yulia

Release： 2018-09-27 10:19:15

Original

5318 people have browsed it

We often encounter text overflow at work and need to display an ellipsis. How is this ellipsis implemented? This article will tell you how to use text-overflow in CSS to display ellipsis in the excess part. Friends who are not familiar with CSS text overflow and ellipses can refer to it. I hope it can help you!

The text-overflow attribute indicates how the excess part should be displayed when the text exceeds the element that contains it.

Writing: text-overflow: clip | ellipsis

Attribute value description:

clip: means trimming the text, and the excess part will not display the omission mark

ellipsis: Indicates that the omission mark is displayed when the text overflows (...)

Note: text-overflow is only used to explain how to display the text when it overflows. If you want to display it when it overflows, The effect of the ellipsis must also require the text to be displayed in one line (white-space:nowrap) and the overflow content to be hidden (overflow:hidden). Only in this way can the effect of the text overflowing and displaying the ellipsis be achieved. The code is as follows:

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

Example: Life is not only about the present, but also poetry and distant fields. You came to this world with your bare hands, desperate to find the sea. When this sentence exceeds the specified range, set different effects for it. The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{border:1px solid #000000;width: 300px;white-space: nowrap;overflow: hidden;}
.a1{text-overflow: clip;}
.a2{text-overflow:ellipsis;}
</style>
</head>
<body>
<div class="a1">生活不止眼前的苟且，还有诗和远方的田野。你赤手空拳来到人世间，为找到那片海不顾一切</div>
<div class="a2">生活不止眼前的苟且，还有诗和远方的田野。你赤手空拳来到人世间，为找到那片海不顾一切</div>
</body>
</html>

Copy after login

Rendering:

Detailed graphic explanation of CSS text overflow display ellipsis effect (text-overflow)

As shown in the picture, the first div uses the text-overflow: clip attribute, which exceeds Part of it is cut off directly, that is, it is cut off wherever it overflows. The second div uses text-overflow:ellipsis. When its text overflows, an ellipsis will be added. Under normal circumstances, the overflow part is set with an ellipsis.

Summary: If you require a single line of text to overflow and display an ellipsis, you can use the text-overflow attribute. text-overflow has two values. If you want the effect of ellipsis, you should use ellipsis. What you use at work depends on the situation. The above is an introduction to adding ellipses to the excess parts of CSS. I hope it can help you.

The above is the detailed content of Detailed graphic explanation of CSS text overflow display ellipsis effect (text-overflow). For more information, please follow other related articles on the PHP Chinese website!