How to set overflow and no line break in css

How to set overflow and no line wrapping in css: First create an HTML sample file; then define the div; finally, set the CSS style such as "overflow: hidden;text-overflow:ellipsis;" to achieve the overflow and no line wrapping effect. .

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

How to set overflow without line wrapping in css?

css text overflow does not wrap, and ellipses are displayed

Single line text overflows;

Set the width, if more than the text overflows, ellipses are displayed;

div{
width:300px;    
overflow: hidden;    
text-overflow:ellipsis;    
whitewhite-space: nowrap;
}

Multi-line text overflow;

uses WebKit’s CSS extended attributes. This method is suitable for WebKit browsers and mobile terminals;

Note:

1.-webkit- line-clamp is used to limit the number of lines of text displayed in a block element. In order to achieve this effect, it needs to be combined with other WebKit properties. Commonly combined attributes:

2.display: -webkit-box; must be combined to display the object as a flexible box model.

3.-webkit-box-orient must be combined with the attribute to set or retrieve the arrangement of the child elements of the flex box object.

div{
display: -webkit-box;    
-webkit-box-orient: vertical;    
-webkit-line-clamp: 3;    
overflow: hidden;
}

Not a Webkit browser yet~~

Recommended study: "css video tutorial"

The above is the detailed content of How to set overflow and no line break in css. For more information, please follow other related articles on the PHP Chinese website!