How to display ellipsis when css exceeds width

How to display ellipsis in css beyond the width: first create a new HTML document; then define the

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

First, create a new HTML document to host CSS

Save the above part and preview the effect in the browser. At this moment, CSS is not introduced. The effect of setting

Define the

Define a piece of CSS for the h1 tag to set the display of the ellipsis beyond the part. Example:

h1{
            width: 300px;/*定义块元素的宽度*/
            white-space: nowrap;/*内容超宽后禁止换行显示*/
            overflow: hidden;/*超出部分隐藏*/
            text-overflow:ellipsis;/*文字超出部分以省略号显示*/
}

Save the above file and preview the effect in the browser

Recommended: "css video tutorial"

The above is the detailed content of How to display ellipsis when css exceeds width. For more information, please follow other related articles on the PHP Chinese website!