css单行文本溢出打点是什么？

html-css020

css单行文本溢出打点是什么？,第1张

是待省略的意思。要省略就要它不换行white-space：nowrap。不换行就会有超出部分显示，这超出的部分要让它隐藏overflow：hidden；最后就是它要显示省略号text-overflow：ellipsis；

white-space：nowrap；/*文本不换行*/

overflow：hidden；/*溢出部分隐藏*/

text-overflow：ellipsis；/*溢出部分用“。。。”代替*/}#tourp{

white-space：nowrap；

扩展资料：

css的工作原理

CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。

无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。

样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。

名称CSS中的“层叠（cascading）”表示样式单规则应用于HTML文档元素的方式。具体地说，CSS样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。

text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。

没有严格顺序，可以先写单行，再写多行文本：

//单行

overflow: hidden

text-overflow:ellipsis

white-space: nowrap

//多行

display: -webkit-box

-webkit-box-orient: vertical

-webkit-line-clamp: 3

overflow: hidden

希望对你有帮助，望采纳！

首先你要考虑文字放不下的时候它会自动还行，要省略就要它不换行white-space: nowrap

不换行就会有超出部分显示，这超出的部分你要让它隐藏overflow: hidden

最后就是它要显示省略号text-overflow: ellipsis

更多关注：腾讯课堂 潭州教育 前端事业部：真心老师