CSS3文本溢出
text-overflow:
text-overflow:clip | ellipsis;
clip:剪切多余的文字。
ellipsis:文本溢出时显示省略标记。
要实现文本溢出剪切显示省略标记,还需要两个属性的配合,并定义文本容器宽度。
text-overflow:ellipsis;
white-space:nowrap; //强制文本在一行显示
overflow:hidden; //溢出内容隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{padding: 0;margin: 0;}
.clearfix:before,.clearfix:after{
display: table;content: "";
}
.clearfix:after{
clear:both;
overflow:hidden;
}
a:link{text-decoration: none;}
a:hover{text-decoration: underline;color:#f30}
.wrap{
width: 350px;
margin: 30px auto;
}
.wrap dl{
width: 350px;
border:1px solid #00CCCC;
border-radius: 8px;
box-shadow: 5px 5px 5px #008000;
}
.wrap dt{
height: 2em;
line-height: 2em;
padding-left: 5px;
color: #000;
font-weight: bold;
-webkit-border-left-top-radius:8px;
-moz-border-left-top-radius:8px;
border-top-left-radius:8px;
-webkit-border-right-top-radius:8px;
-moz-border-right-top-radius:8px;
border-top-right-radius:8px;
}
.wrap dd{
margin: 8px auto;
font-size: 16px;
}
.wrap ul{
list-style: none outside none;
padding-left: 24px;
background: url(../img/bg.png) no-repeat 2px 3px;
}
.wrap li { display: inline;
}
.wrap li a{
width: 220px;
float: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wrap span{
float: right;
padding-right: 5px;
}
</style>
</head>
<body>
<div class="wrap clearfix">
<dl>
<dt>今日热点</dt>
<dd>
<ul class="clearfix">
<li><a href="http://www.cnblogs.com/staven/">访美首站为何选在西雅图?</a><span>2015-09-17</span></li>
<li><a href="http://www.cnblogs.com/staven/">三项目受关注:中国参建美高铁 中国领袖亮相联合国</a><span>2015-09-17</span></li>
<li><a href="http://www.cnblogs.com/staven/">美甲师用得着政府发证吗?竟然还细分五级!</a><span>2015-09-17</span></li>
<li><a href="http://www.cnblogs.com/staven/">男孩带闹钟上学被当炸弹 奥巴马:来白宫玩吧</a><span>2015-09-17</span></li>
</ul>
</dd>
</dl>
</div> </body>
</html>
word-wrap:
word-wrap:normal | break-word;
normal::默认值。浏览器只在半角空格或连字符的地方进行换行。
break-word:将内容在边界内换行。应用在<pre>和<table>中,没有任何效果。
word-break:
word-break:normal | break-all | keep-all;
normal:默认值。
break-all:可以强行截断英文单词,达到词内换行效果。
keep-all:不允许断开。
while-space:
white-space:normal | pre | nowrap | pre-line | pre-wrap | inherit
normal:默认值。
pre:文本空白处会被浏览器扣留。
nowrap:文本不换行,文本会在同一行上,直到碰到换行标签<br/>为止。
pre-line:合并空白符序列,但保留换行符。
pre-wrap:保留空白符序列,但是正常进行换行。
inherit:继承元素的white-space属性值。
文本换行技巧:
1) pre标签自动换行
pre {
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS2.1 */
white-space: pre-line; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
2) 单元格(td)自动换行
table{
table-layout: fixed;
width: ***px;
}
table td{
overflow: hidden;
word-wrap: break-word;
}
3) 除pre、td标签外其他标签自动换行
element{
overflow: hidden;
word-break: break-word;
}
4) 标签内容强制换行
element{
white-space: nowrap;
word-break: keep-all;
}
word-wrap,当其取值为break-word时,强制换行,中英文文本都无任何问题,但是对于长串的英文不起作用。也就是说break-word只能断词,不是来断字符的。
word-break:当属性值为break-all时,可允许非亚洲语言文本的任意字符断开。当属性值为keep-all时表示在中文、韩文、日文中是不允许断开的。
white-space:具有文本格式化作用,当属性值为nowrap时,表示文本强制不换行;当取值为pre时,表示显示预定义文本格式。
CSS3文本溢出的更多相关文章
- CSS3文本溢出显示省略号
CCS3属性之text-overflow:ellipsis;的用法和注意之处 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象 ...
- CSS3 文本溢出问题
一.单行: 效果: 实现这各效果必须要加上: text-overflow: ellipsis; /*文本溢出*/ overflow: hidden; /*配合使用:溢出隐藏*/ white-space ...
- CSS3 文本效果(阴影)
CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴 ...
- CSS3:CSS3 文本效果
ylbtech-CSS3:CSS3 文本效果 1.返回顶部 1. CSS3 文本效果 CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow bo ...
- 文本溢出text-overflow和文本阴影text-shadow
前面的话 CSS3新增了一些关于文本的样式,其中text-overflow文本溢出和text-shadow文本阴影有些特别.因为它们有对应的overflow溢出属性和box-shadow盒子阴影属性. ...
- 第 21 章 CSS3 文本效果
学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一.文本阴影 ...
- CSS3文本温故
1.CSS早期属性,分为三大类:字体.颜色和文本: 2.CSS文本类型有11个属性: 注:还有一个颜色属性:color,主要用来设置文本颜色 3.CSS3文本阴影属性:text-shadow语法:te ...
- 浅谈文本溢出省略号代表修剪text-overflow
一.示例 图片显示: HTML结构: CSS样式: 注意: CSS3 text-overflow 属性规定当文本溢出包含元素时发生的事情,其中 所有浏览器都支持 white-space 属性. 示例 ...
- [HTML] CSS3 文本效果
CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持
随机推荐
- 合并区间(LintCode)
合并区间 给出若干闭合区间,合并所有重叠的部分. 样例 给出的区间列表 => 合并后的区间列表: [ [ [1, 3], [1, 6], [2, 6], => [8, 10], [8, 1 ...
- 打开eclipse 时出现Failed to load the JNIshared libraryd的解决方式
由于电脑重装系统,所以电脑的jdk,与eclipse需要重新配置,今天配置完成jdk之后,打开eclipse出现了Failed to load the JNIshared libraryd的错误,如下 ...
- 【51Nod 1239】欧拉函数之和
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1239 还是模板题. 杜教筛:\[S(n)=\frac{n(n+1)}{2 ...
- python基础之if,while,for
流程控制之if判断 根据女性年龄不同的不同叫法,如: age = 24 if age < 18: print('小妹妹好') elif age <28: print('小姐姐好') els ...
- [NOIp2016提高组]蚯蚓
题目大意: 给你n个不同长度蚯蚓,每秒从里面取出最长的砍下u/v变成两只,又把剩下的加长q. 问你在m之前的t,2t,3t...的时间上,砍的蚯蚓长度, 以及m秒后剩下所有的蚯蚓长度. 思路: 很容易 ...
- android 检查能否上网
文章一: 首先在,AndroidManifest.xml 中增加访问权限: <uses-permission android:name="android.permission.ACCE ...
- ALCHEMY 2 (FLASCC)新手入门 (WINDOWS 版)
Adobe Alchemy(炼金术) 2的预发布版本已经对开发者开放,并且已经更名为 FlasCC.炼金术简单来说就是把c/c 代码编译成swf文件,它吸收了c/c 高效的执行效率,比传统开发的swf ...
- Nao 类人机器人,Aldebaran Robotics公司
Nao 类人机器人,Aldebaran Robotics 公司,被SOFTBANK 收购,阿里巴巴.富士康参股. https://www.aldebaran.com/en 一家法国的公司. htt ...
- sql server阻塞(block)处理
sp_who2 ACTIVE --从下图可知spid = 65进程被76阻塞 --或 * FROM sys.sysprocesses WHERE blocked <> 0 ) --查看阻塞 ...
- Android Studio断点调试
Android Studio断点调试 Android Studio包含一个debugger程序,可以帮助你在模拟器和真机上调试你的android应用.通过Android Studio的debugger ...