有人会问,为什么我把text-overflow拿出来单独讲解。以前,当一行内容显示不完整的时候,想要显示省略符,需要通过javascript等手段。
但是CSS3引入了text-overflow省略符属性,只需要短短一行代码就可以实现,开发方式的简洁强大不言而喻。
这篇文章,我讲带领大家做一个《今日头条》新闻导航列表,带领大家领略text-overfow的强大魅力。先看一下效果:
好了,看完了效果,现在正式开始今天的开发旅程吧!
首先我们先创建html页面,代码如下所示(红色文字即是我们Demo的主要内容):
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<link rel=”stylesheet” href=”styles.css”>
<title>text-overflow 实例详解</title>
</head>
<body>
<div>
<div>
<dl>
<dt>今日头条</dt>
<dd>
<ul>
<li><a href=”http://www.itdriver.cn”>迅雷浴血IPO员工心寒:空降高管摘桃</a></li>
<li><a href=”http://www.itdriver.cn”>小米4前面板谍照曝光 采用超窄边框设计</a></li>
<li><a href=”http://www.itdriver.cn”>在线旅游市场风云变 携程将入股艺龙?</a></li>
<li><a href=”http://www.itdriver.cn”>人网副总裁杜悦离职 炮轰陈一舟为人负面</a></li>
</ul>
</dd>
</dl>
</div>
</div>
</body>
</html>
|
页面创建完后,我们先运行一下,查看一下效果:
根据上面的图片,我们第一步要做的就是清除各元素的默认样式。让我们一起动手来编写我们的外部样式文件表:
*{ /*这是一个通配符,匹配页面中所有元素,清除页面所有元素的默认外边距,默认内边距*/
padding:0px;
margin:0px;
color:#000;
}
a:link{ /*设置超链接未访问时样式*/
text-decoration:none;
}
a:hover{ /*鼠标滑过超链接时显示的样式*/
color:#F30;
text-decoration:underline;
}
.sidebar{ /*将边栏设置成固定宽度*/
margin:10px auto;
width:200px;
}
.sidebar ul{ /*清除ul默认样式*/
list-style-type:none;
}
|
运行html页面,查看此时运行效果图:
接下来我们就给列表加上阴影边框,以及阴影效果,同时也给title加上背景颜色,代码如下所示(红色字体部分):
*{ /*这是一个通配符,匹配页面中所有元素,清除页面所有元素的默认外边距,默认内边距*/
padding:0px;
margin:0px;
color:#000;
}
a:link{ /*设置超链接未访问时样式*/
text-decoration:none;
}
a:hover{ /*鼠标滑过超链接时显示的样式*/
color:#F30;
text-decoration:underline;
}
.sidebar{ /*将边栏设置成固定宽度*/
margin:10px auto;
width:200px;
}
.sidebar ul{ /*清除ul默认样式*/
list-style-type:none;
}
.sidebar dl{ /*设置列表的边框,并设置列表的圆角,以及阴影效果*/
border: 1px solid #80C8FE;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
box-shadow:6px 6px 6px #666;
}
.sidebar dt{/* 设置title样式 */
height:2em; /*设置title高度以及行高,使文字垂直居中 */
line-height:2em;
padding-left:4px;
background-color:#80C8FE; /*设置title行的背景颜色*/
color:#FFF; /*设置文字颜色*/
font-weight:bold; /*调整文字加粗显示*/
-webkit-border-top-left-radius:8px; /*设置title行的左上和右上圆角效果*/
-moz-border-top-left-radius:8px;
border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
-moz-border-top-right-radius:8px;
border-top-right-radius:8px;
}
|
运行一下html页面,查看修改完之后的效果,现在我们的列表边框,列表头的样式都已经好了:
最后,让我们运用text-overflow来设置省略符样式吧。在样式表中加入如下代码:
.sidebar dd{ /*设置dd 与 dt 之间的间距,并将字体设置为外框大小的0.8倍*/
margin:10px auto;
font-size:0.8em;
}
.sidebar dd li{ /*设置新闻列表间距离,并设置不换行,且显示省略符 */
margin-top:4px;
padding: 2px 4px;
text-overflow:ellipsis;
}
|
在li里我们加上了属性 text-overflow:ellipsis。 接着我们运行一下页面,查看此时的效果:
不对啊,我们已经加了text-overflow:ellipsis属性了,怎么还没有省略符号呢。 其实顾名思义,这个属性代表的是文本超出限度之后,添加省略符号。但是,我们看运行的效果,页面文字自动换行了。
现在我们不让它换行,加上white-space:nowrap。代码如下所示:
.sidebar dd{ /*设置dd 与 dt 之间的间距,并将字体设置为外框大小的0.8倍*/
margin:10px auto;
font-size:0.8em;
}
.sidebar dd li{ /*设置新闻列表间距离,并设置不换行,且显示省略符 */
margin-top:4px;
padding: 2px 4px;
text-overflow:ellipsis;
white-space:nowrap;
}
|
我们再运行看一下页面效果:
我们看到上面的例子,现在已经不换行了,但是内容却超出范围依然显示,好,那我们就让它超出范围的就不显示(text-overflow:hidden;)。修改代码如下:
.sidebar dd{ /*设置dd 与 dt 之间的间距,并将字体设置为外框大小的0.8倍*/
margin:10px auto;
font-size:0.8em;
}
.sidebar dd li{ /*设置新闻列表间距离,并设置不换行,且显示省略符 */
margin-top:4px;
padding: 2px 4px;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
|
我们现在再运行一下html页面,看看修改后的效果:
看到上面,心情非常激动,终于得到想要的效果了。
从这几步,我们也大概可以看出,其实text-overflow省略符属性,只是告诉浏览器:如果文本没换行,溢出范围了,如果你隐藏溢出的内容,那我就给你显示省略符。
至此大功告成,哈哈, text-overflow,white-space,overflow 这三个属性,更像一个铁三角啊。
相关推荐
大家经常用的css3属性text-overflow是针对单行文本溢出的操作,那块级元素的文本溢出要怎样处理呢? 需要用到-webkit-line-clamp:
text-overflow:clip | ellipsis 这个属性使用必须通过几个属性一块才能使用 1,overflow:hidden; 这个属性是内容区装不下内容应该怎么办。这里让溢出内容直接不显示。这个感觉就是必备的属性。我内容文本溢出全部...
基本语法 text-overflow的使用需配合hight,over-flow:hidden;white-space:nowrap;三个属性共同使用 text-overflow: clip;ellipsis;string clip: 直接隐藏不显示 ...style type=text/css> .tf{ width:
听说用css的 text-overflow: ellipsis 也可以实现,于是尝试了下。 发现除了设置 text-overflow 属性为 ellipsis 外 还需要设置 white-space 属性为 nowrap (限制不换行) 和 overflow 属性为 hidden (隐藏溢出...
主要给大家介绍了关于css中text-overflow属性与文本截断的相关资料,文中给出了详细的示例代码供大家参考学习,希望本文的内容对各位前端开发者们能带一定的帮助,需要的朋友们下面跟着小编一起来学习学习吧。
text-shadow 给文字设置阴影的属性 text-shadow: 1px 2px 3px red; 1px表示X轴偏移量(取值范围负数~正数,负数阴影在左,正数阴影在右),2px表示Y轴偏移量,3px表示模糊度(数值越大越模糊,该数值不能为负值) ...
本文是CSS属性探秘系列的第二篇,主要为大家介绍了css的overflow属性以及其相关属性text-overflow,有需要的朋友可以参考下,欢迎大家来进行讨论
大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 但是这个属性并不...
利用CSS3新增的text-shadow属性可以生成文本阴影,在HTML文档中实现多重阴影特效、火焰特效、发光特效、凸起和镶嵌特效、描边特效和阴影特效的艺术字效果,大大提高开发效率,无需链接图片文件,节约带宽。
复制代码代码如下:<DIV xss=removed> 就是比如有一行文字,很长,表格内一行显示不下</NOBR></DIV><DIV xss=removed> 就是比如有一行文字,很长,表格内一行显示不下. 有时为了避免文
CSS关于文本渲染的属性text-rendering告诉渲染引擎工作时如何优化显示文本。 浏览器会在渲染速度、易读性(清晰度)和几何精度方面做一个权衡。 我们知道,SVG-可缩放矢量图形(Scalable Vector Graphics)是由W3C...
css3-text-bubble-tips.zip
PostCSS 溢出速记 允许您按照规范在 CSS 中使用overflow速记。 ... overflow : hidden auto;...const postcssOverflowShorthand = require ( 'postcss-overflow-shorthand' ) ; postcss ( [ postcssOverflow
详情请查看地址:https://blog.csdn.net/Li_dengke/article/details/113061498
在w3cschool中css3中有个文本相关的属性text-overflow,当把它设为ellipsis时文本溢出内容就能显示为省略标记,而设为clip时就能把文本溢出的部分裁切掉,当然,前提是设置好两个属性,那就是white-space:nowrap...
HTML5 CSS3 text-shadow 文字阴影立体特效,prefixfree.min.js插件和jquery配合实现的文字特效,使用时只需定义需要显示阴影的文字即可,页面打开后会自动生成阴影文字,测试时请使用支持HTML5内核的浏览器。
background-origin //css3新增属性 background-clip //css3新增属性 background-size //css3新增属性 描述 说明 (css3多重背景属性) 设置多重背景图像 div { width: 800px; height: 600px; background:url...