How to display css text that is too long...-CSS Tutorial-php.cn

How to display css text that is too long...

WBOY

Release： 2021-11-19 09:48:28

Original

9802 people have browsed it

How to display ellipses when text is too long: 1. Add the "overflow:hidden;" style to the text element to hide the excess part of the text; 2. Add "text-overflow:ellipsis;" to the text element The hidden part of the text in the style can be represented by an ellipsis "...".

How to display css text that is too long...

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Css text is too long, use... display method

1. Use the CSS overflow attribute to control the content when it overflows the element box. Add scroll bars within the element range.

When the value of the overflow attribute is hidden, it means that the content will be trimmed and the remaining content is invisible.

The example is as follows:

<!DOCTYPE html>
<html>
<head>
<style> 
div{
    white-space:nowrap; 
    width:12em; 
    overflow:hidden; 
    border:1px solid #000000;
    }
</style>
</head>
<body>  
    <div >This is some long text that will not fit in the box</div>
</body>
</html>

Copy after login

Output result:

How to display css text that is too long...

At this time, the excess text is cropped, and you want the excess The text is represented by an ellipsis and the text-overflow attribute is indispensable.

2. In CSS, we can use the text-overflow attribute to specify what happens when text overflows the containing element.

The syntax of the text-overflow attribute is:

text-overflow: clip|ellipsis|string;

Copy after login

It should be noted that:

clip means trimming the text.
ellipsis means displaying ellipses to represent trimmed text.
#string means using the given string to represent the trimmed text.

So if you want to display redundant text with..., you only need to add the "text-overflow:ellipsis" style to the text element. The example is as follows:

<!DOCTYPE html>
<html>
<head>
<style> 
div{
    white-space:nowrap; 
    width:12em; 
    overflow:hidden; 
    border:1px solid #000000;
    text-overflow:ellipsis;
    }
</style>
</head>
<body>
    
    <div >This is some long text that will not fit in the box</div>
</body>
</html>

Copy after login

Output result:

How to display css text that is too long...

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of How to display css text that is too long.... For more information, please follow other related articles on the PHP Chinese website!