CSS3 text-overflow property

 The function of the CSS3 text-overflow property is used to modify frequently used strings. The end of the string that is out of range can be directly truncated or turned into dots (...). At present, the latest version of all mainstream browsers Both support the effect of CSS3 text-overflow property. When using the CSS3 text-overflow property, it is also often used with the overflow property to control out-of-range strings and the white-space property to avoid string wrapping. In fact, even if you don’t use the text-overflow attribute, just using overflow and white-space is enough to prevent the extra strings from wrapping or displaying. However, the text-overflow attribute can be modified slightly to change the extra strings. Dot (...) display, let people know that other content is hidden behind, traditional web design to achieve this effect, usually in the server-side PHP to process the string length first, with CSS3 The text-overflow attribute can save a lot of work.

CSS3 text-overflow property syntax

text-overflow: set value;

The most commonly used settings for CSS3 text-overflow properties are clip and ellipsis. Other settings are listed in the table below.

CSS3 text-overflow property value and effect

Set value	Description
clipe	Cut off the out-of-range strings.
ellipsis	Use dot dots (...) to indicate the cut string.
String	Use the set string to represent the cut string.
initial	Set this attribute to the default value.
inherit	The attribute setting value inherited from the parent layer.

CSS3 text-overflow property practical example

<meta charset="utf-8">
<style type="text/css">
#DIV1{
    width:365px;
    overflow:hidden;
    border:1px #666666 solid;
    white-space:nowrap;
    margin-bottom:5px;
}
#DIV2{
    width:365px;
    overflow:hidden;
    text-overflow:clip;
    border:1px #666666 solid;
    white-space:nowrap;
    margin-bottom:5px;
}
#DIV3{
    width:365px;
    overflow:hidden;
    text -overflow:ellipsis;
    border:1px #666666 solid;
    white-space:nowrap;
}
</style>
<div id="DIV1">This is a line of text-overflow attribute test text, please pay attention to the treatment of the end of the string </div>
<div id="DIV2">This is a line of text-overflow attribute test text, please pay attention to the treatment of the end of the string</div>
<div id="DIV3">This is a line of text-overflow attribute test text. Please pay attention to the treatment of the end of the string</div>

Presentation of the example

This is a line of test text with the text-overflow attribute, please pay attention to the treatment of the end of the string

This is a line of test text with the text-overflow attribute, please pay attention to the treatment of the end of the string

This is a line of test text with the text-overflow attribute, please pay attention to the treatment of the end of the string

In the example, a total of three DIV blocks with a width of 365px are prepared. The length of the text in the block is more than 365px. Then a few basic settings include "overflow: hidden;" to hide strings that exceed the width of the DIV , "white -space:nowrap;" Don’t wrap extra strings automatically. The most important thing is that the protagonist of this article, text-overflow, is ready to appear. We only use the text-overflow attribute in the second DIV and the third DIV . The purpose is To compare the difference in effect.

From the presentation results of the example, we can see that the effect of "text-overflow:clip;" used by DIV2 is actually the same as that of DIV1. The redundant text is directly cut off without any beautification, while DIV3 uses "Text-overflow:ellipsis;", so the effect of (...) at the end of the string continues to the width of the DIV block.

The above is the common CSS3 text-overflow property application method, especially the effect of (...) is very helpful to save PHP work. If you want to list some search results or data lists, you can omit the PHP judgment word The resource consumption of string length is faster and more efficient by using text-overflow property, and the layout is easier to beautify.