How to set the excess part of a tag to ellipsis in css3

Method: 1. Use the "overflow:hidden;" style to set the a label text beyond hiding; 2. Use "display: block;" to set the a label to a block-level element; 3. Use "text-overflow :ellipsis;" Just set the style of the excess part of the a tag to an ellipsis.

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

How to set the excess part of a tag to ellipses in css3

The text-overflow attribute specifies how the text should be displayed when it overflows the element containing it. After overflow, you can set the text to be cut, to display an ellipsis (...), or to display a custom string (not supported by all browsers).

text-overflow: clip|ellipsis|string|initial|inherit;

clip Cut text.

ellipsis Displays ellipsis symbols ... to represent trimmed text.

The example is as follows:

a tag text can display ellipses by giving a fixed length and style

css:

 .cont {
            width: 180px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            float: left;
        }

html:

<a class="cont">这是一个名称很长的文档吧要测试超出功能</a>

The display effect is as shown in the figure:

(Learning video sharing: css video tutorial)

The above is the detailed content of How to set the excess part of a tag to ellipsis in css3. For more information, please follow other related articles on the PHP Chinese website!