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:

实现长单词与URL地址的自动换行。
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文本溢出的更多相关文章

  1. CSS3文本溢出显示省略号

    CCS3属性之text-overflow:ellipsis;的用法和注意之处 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象 ...

  2. CSS3 文本溢出问题

    一.单行: 效果: 实现这各效果必须要加上: text-overflow: ellipsis; /*文本溢出*/ overflow: hidden; /*配合使用:溢出隐藏*/ white-space ...

  3. CSS3 文本效果(阴影)

    CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴 ...

  4. CSS3:CSS3 文本效果

    ylbtech-CSS3:CSS3 文本效果 1.返回顶部 1. CSS3 文本效果 CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow bo ...

  5. 文本溢出text-overflow和文本阴影text-shadow

    前面的话 CSS3新增了一些关于文本的样式,其中text-overflow文本溢出和text-shadow文本阴影有些特别.因为它们有对应的overflow溢出属性和box-shadow盒子阴影属性. ...

  6. 第 21 章 CSS3 文本效果

    学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一.文本阴影 ...

  7. CSS3文本温故

    1.CSS早期属性,分为三大类:字体.颜色和文本: 2.CSS文本类型有11个属性: 注:还有一个颜色属性:color,主要用来设置文本颜色 3.CSS3文本阴影属性:text-shadow语法:te ...

  8. 浅谈文本溢出省略号代表修剪text-overflow

    一.示例 图片显示: HTML结构: CSS样式: 注意: CSS3 text-overflow 属性规定当文本溢出包含元素时发生的事情,其中 所有浏览器都支持 white-space 属性.  示例 ...

  9. [HTML] CSS3 文本效果

    CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持

随机推荐

  1. mvc4 to mvc5 orEF5 to EF6 ,(升级EF6)

    把后台MVC4 自动生成的网站从EF5.0 升级为 EF6.1.3 (6.0以上) 报错 找不到方法:“System.Data.Objects.ObjectContext System.Data.En ...

  2. js流程控制与函数

    流程控制 1.条件语句 分支结构 单向分支 if (条件表达式){ code... } 双向分支 if (条件表达式){ code... }else{ code... } 多向分支 if (条件表达式 ...

  3. vue组件续和前端工程化

    1.3 插槽 slot template: ` <button> <slot></slot> </button> ` <my-button> ...

  4. Problem B: 年龄问题

    #include<stdio.h> int xx(int n,int m,int k) { int a; ) { a=k; } else { a=xx(n-,m,k)+m; } retur ...

  5. 将WPF版的弹幕播放器给优化了一下

    年前较闲的时候研究了一下WPF的性能优化,练手的时将之前写的弹幕播放器给重新写了一下.年前的时间不大够,没有写完,这两天接着弄了一下,基本上弄得差不多了. 主要重写了底层的渲染算法,优化后效果还是非常 ...

  6. datetimepicker只显示日期,不显示时分秒

    HTML代码<div class="input-group date form_datetime form-date" data-link-field="dtp_i ...

  7. 【Sets】使用Google Guava工程中Sets工具包,实现集合的并集/交集/补集/差集

    获取两个txt文档的内容~存储进集合中求集合的并集/交集/补集/差集 package com.sxd.readLines.aboutDB; import java.io.BufferedReader; ...

  8. Android记一次后台保活设计心得2018

    首先我并不推荐也不喜欢手机应用通过各种手段后台保活,但是当产品经理确定一定以及肯定地提出了这个需求,活着应用有着必须常驻后台的理由,也就只有硬着头皮去与各个手机的后台管理机制做斗争了. 背景:因为开发 ...

  9. MFC进度条刷新处理

    m_p.SetRange(0,1000); m_p.SetStep(1); for (int i=0;i<1001;i++) { m_p.SetPos(i); Sleep(10); MSG ms ...

  10. 关于单例模式的N种实现方式

    在开发中经常用到单例模式,单例模式也算是设计模式中最容易理解,也是最容易手写代码的模式,所以也常作为面试题来考.所以想总结一下单例模式的理论知识,方便同学们面试使用. 单例模式实现的方式只有两种类型, ...