Heim > Web-Frontend > CSS-Tutorial > Hauptteil

css文字太长怎样用..显示

WBOY
Freigeben: 2021-11-19 09:48:28
Original
9635 人浏览过

文字太长用省略号显示的方法:1、给文字元素添加“overflow:hidden;”样式将文字超出的部分隐藏起来;2、给文字元素添加“text-overflow:ellipsis;”样式将文字隐藏的部分用省略号“...”表示即可。

css文字太长怎样用..显示

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

css文字太长用..显示的方法

1、使用CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

当overflow属性的值为hidden时,表示内容会被修剪,并且其余内容是不可见的。

示例如下:






This is some long text that will not fit in the box
Nach dem Login kopieren

输出结果:

1119.03.png

这时候多余的文字被裁剪了,想要多余的文字用省略号表示还不能少text-overflow属性。

2、在css中我们可以使用text-overflow 属性规定当文本溢出包含元素时发生的事情。

text-overflow属性的语法为:

text-overflow: clip|ellipsis|string;
Nach dem Login kopieren

其中需要注意的是:

  • clip表示修剪文本。

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

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

因此想要让多余的文字用..显示,只需要给文字元素添加“text-overflow:ellipsis”样式即可,示例如下:






This is some long text that will not fit in the box
Nach dem Login kopieren

输出结果:

1119.02.png

更多编程相关知识,请访问:编程视频!!

以上是css文字太长怎样用..显示的详细内容。更多信息请关注PHP中文网其他相关文章!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!