星空网 > 软件开发 > 网页设计

css单行文本与多行溢出文本的省略号问题

在文字布局和代码编写过程中遇到文本溢出是常有的事,下面总结一下对于单行文本溢出和多行文本溢出省略号的处理。

一。单行文本省略号

1 <p class="text1">2   这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本3 </p>

.text1{  width: 100px;  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;}

这里拿一段简单的文字示例单行文本溢出:

  这里的width属性是必须的,因为需要知道它的宽度是多少,才能判断溢出;

  overflow属性使为了隐藏溢出的文本;

  white-space:

描述
normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap保留空白符序列,但是正常地进行换行。
pre-line合并空白符序列,但是保留换行符。
inherit规定应该从父元素继承 white-space 属性的值。

  text-overflow:

描述
clip修剪文本。
ellipsis显示省略符号来代表被修剪的文本。
string使用给定的字符串来代表被修剪的文本。

二。多行文本省略号

1 <p class="text2">2   这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本3 </p>

.text2{  height:53px;  width:100px;  overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;}

上面说过的在这里就不再多说了。

在这里height属性和overflow属性相结合是为了隐藏省略号一下的文本,大家可以试一下不加的效果,就一目了然了。

line-clamp属性是为了控制文本显示多少行。

关于display和box-orient,在这里简单说一下:

  说明:必须定义display属性才可以对box进行划分。

  box-orient 属性指定一个box子元素是否应按水平或垂直排列。

说明
horizontal指定子元素在一个水平线上从左至右排列
vertical从顶部向底部垂直布置子元素
inline-axis子元素沿着内联坐标轴(映射到横向)
block-axis子元素沿着块坐标轴(映射到垂直)
inheritbox-orient 属性的值应该从父元素继承

如果还是不太明白,大家可以访问网址:http://wenlong883.blog.163.com/blog/static/1718109162011102281912385/或在w3c里看css各个属性。

 




原标题:css单行文本与多行溢出文本的省略号问题

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

新手入门亚马逊必备知识点:https://www.ikjzd.com/articles/138557
速卖通调整美西线上发货物流报价:https://www.ikjzd.com/articles/138558
阿里国际站如何高质量RFQ客户营销:https://www.ikjzd.com/articles/138559
国际贸易风险,有人了解过吗:https://www.ikjzd.com/articles/138560
跨境攻略:如何申请降低PayPal准备金?:https://www.ikjzd.com/articles/138561
防侵权预警182:膝上办公桌在美国市场的外观专利情况:https://www.ikjzd.com/articles/138562
TikTok斥资210万美元游说美国参议院阻止法案通过 :https://www.goluckyvip.com/news/188220.html
北京飞机票查询(快速查询北京至各地机票价格和航班信息):https://www.vstour.cn/a/366178.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流