How to set how many characters to display in a line in css3-Front-end Q&A-php.cn

How to set how many characters to display in a line in css3

WBOY

Release： 2022-01-24 15:42:53

Original

3193 people have browsed it

In CSS3, the width and overflow attributes can be used to set how many characters are displayed in a line. The width attribute is used to set the width of the text box, and the overflow attribute is used to set a line of text not to be displayed when it exceeds the width of the text box. The syntax "element {width:width value;overflow:hidden;}".

How to set how many characters to display in a line in css3

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

How to set how many characters to display in one line in css3

The overflow attribute specifies what happens when the content overflows the element box.

This attribute defines how content that overflows the element's content area will be handled. If the value is scroll, the user agent provides a scrolling mechanism whether required or not. Therefore, it is possible that scrollbars will appear even if everything fits inside the element box.

Possible values:

How to set how many characters to display in a line in css3

Example is as follows:

<html>
<head>
<style type="text/css">
div 
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow:hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>
</html>

Copy after login

Output result:

How to set how many characters to display in a line in css3

(Learning video sharing: css video tutorial)

The above is the detailed content of How to set how many characters to display in a line in css3. For more information, please follow other related articles on the PHP Chinese website!