Does the new attribute of css3 set the text overflow style?

WBOY
Release: 2022-06-20 15:32:27
Original
1952 people have browsed it

css3新增的属性有设置文本溢出样式的,可以利用“text-overflow”属性设置文本溢出的样式;该属性用于指定当文本溢出包含文本的元素时应该如何显示,可以设置溢出后文本被裁切、显示省略号等等样式,语法为“元素{text-overflow:属性值;}”。

Does the new attribute of css3 set the text overflow style?

本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。

css3的新增有没有设置文本溢出的属性

text-overflow属性指定当文本溢出包含它的元素时,应该如何显示。可以设置溢出后,文本被剪切、显示省略号 (...) 或显示自定义字符串(不是所有浏览器都支持)。

text-overflow 需要配合以下两个属性使用:

  • white-space: nowrap;

  • overflow: hidden;

语法为:

text-overflow: clip|ellipsis|string|initial|inherit;
Copy after login

clip 剪切文本。

ellipsis 显示省略符号 ... 来代表被修剪的文本。

string 使用给定的字符串来代表被修剪的文本。

initial 设置为属性默认值。

示例如下:

    123  

以下 div 容器内的文本无法完全显示,可以看到它被裁剪了。

div 使用 "text-overflow:ellipsis":

This is some long text that will not fit in the box

div 使用 "text-overflow:clip":

This is some long text that will not fit in the box

div 使用自定义字符串 "text-overflow: >>"(只在 Firefox 浏览器下有效):

This is some long text that will not fit in the box
Copy after login

输出结果:

Does the new attribute of css3 set the text overflow style?

(学习视频分享:css视频教程html视频教程

The above is the detailed content of Does the new attribute of css3 set the text overflow style?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!