首页 > 代码库 > CSS学习笔记:溢出文本省略(text-overflow)
CSS学习笔记:溢出文本省略(text-overflow)
原文:CSS学习笔记:溢出文本省略(text-overflow)
在CSS3中,text-overflow属性的基本语法如下:
- clip:表示不显示省略文本,简单的裁切。
- ellipsis:表示对象文本溢出时显示省略标记,省略标记插入的位置是最后一个字符。
- ellipsis-word:表示当对象文本溢出时显示省略标记,省略标记插入的位置是最后一个词(word)。
实际上,text-overflow属性仅用于决定当文本溢出时是否显示省略标记,并不具备样式定义的功能,要实现溢出时产生省略号的效果,应该在定义两个样式:强制文本在一行内显示(white-space:nowrap)和溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示为省略号效果。
案例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 dl{ 8 width:240px; 9 border: solid 1px #ccc;10 }11 dt{12 padding:8px 8px;13 background: #7fecad;14 font-size: 13px;15 text-align: left;16 font-weight: bold;17 color: #71790c;18 margin-bottom: 12px;19 border-bottom: solid 1px #efefef;20 }21 dd{22 font-size: 0.78em;23 height: 1.5em;24 width: 220px;25 padding:2px 2px 2px 18px;26 margin:2px 0;27 white-space: nowrap;28 overflow: hidden;29 text-overflow: ellipsis;30 }31 </style>32 </head>33 <body>34 <dl>35 <dt>体育新闻</dt>36 <dd>亚运会在韩国港口城市仁川开幕,韩国总统朴槿惠出席</dd>37 <dd>在亚运会首日,韩国军团占据奖牌榜第一位</dd>38 <dd>亚运游泳观战指南:21日开始孙朴5场对决 中日大PK</dd>39 <dd>亚运会在韩国港口城市仁川开幕,韩国总统朴槿惠出席</dd>40 <dd>在亚运会首日,韩国军团占据奖牌榜第一位</dd>41 <dd>亚运游泳观战指南:21日开始孙朴5场对决 中日大PK</dd>42 </dl>43 </body>44 </html>
效果:
CSS学习笔记:溢出文本省略(text-overflow)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。