css3新增属性有设置文本溢出的样式吗(CSS3,web开发)

时间:2024-05-01 03:57:46 作者 : 石家庄SEO 分类 : web开发
  • TAG :

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

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

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

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

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

  • white-space: nowrap;

  • overflow: hidden;

语法为:

text-overflow:clip|ellipsis|string|initial|inherit;

clip 剪切文本。

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

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

initial 设置为属性默认值。

示例如下:

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>123</title><style>div.test{white-space:nowrap;width:12em;overflow:hidden;border:1pxsolid#000000;}</style></head><body><p>以下div容器内的文本无法完全显示,可以看到它被裁剪了。</p><p>div使用&quot;text-overflow:ellipsis&quot;:</p><divclass="test"style="text-overflow:ellipsis;">Thisissomelongtextthatwillnotfitinthebox</div><p>div使用&quot;text-overflow:clip&quot;:</p><divclass="test"style="text-overflow:clip;">Thisissomelongtextthatwillnotfitinthebox</div><p>div使用自定义字符串&quot;text-overflow:&gt;&gt;&quot;(只在Firefox浏览器下有效):</p><divclass="test"style="text-overflow:'>>';">Thisissomelongtextthatwillnotfitinthebox</div></body></html>

输出结果:

css3新增属性有设置文本溢出的样式吗

 </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
本文:css3新增属性有设置文本溢出的样式吗的详细内容,希望对您有所帮助,信息来源于网络。
上一篇:WPF中如何使用CallerMemberName简化InotifyPropertyChanged下一篇:

4 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18