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 浏览器支持
随机推荐
- mvc4 to mvc5 orEF5 to EF6 ,(升级EF6)
把后台MVC4 自动生成的网站从EF5.0 升级为 EF6.1.3 (6.0以上) 报错 找不到方法:“System.Data.Objects.ObjectContext System.Data.En ...
- js流程控制与函数
流程控制 1.条件语句 分支结构 单向分支 if (条件表达式){ code... } 双向分支 if (条件表达式){ code... }else{ code... } 多向分支 if (条件表达式 ...
- vue组件续和前端工程化
1.3 插槽 slot template: ` <button> <slot></slot> </button> ` <my-button> ...
- 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 ...
- 将WPF版的弹幕播放器给优化了一下
年前较闲的时候研究了一下WPF的性能优化,练手的时将之前写的弹幕播放器给重新写了一下.年前的时间不大够,没有写完,这两天接着弄了一下,基本上弄得差不多了. 主要重写了底层的渲染算法,优化后效果还是非常 ...
- datetimepicker只显示日期,不显示时分秒
HTML代码<div class="input-group date form_datetime form-date" data-link-field="dtp_i ...
- 【Sets】使用Google Guava工程中Sets工具包,实现集合的并集/交集/补集/差集
获取两个txt文档的内容~存储进集合中求集合的并集/交集/补集/差集 package com.sxd.readLines.aboutDB; import java.io.BufferedReader; ...
- Android记一次后台保活设计心得2018
首先我并不推荐也不喜欢手机应用通过各种手段后台保活,但是当产品经理确定一定以及肯定地提出了这个需求,活着应用有着必须常驻后台的理由,也就只有硬着头皮去与各个手机的后台管理机制做斗争了. 背景:因为开发 ...
- 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 ...
- 关于单例模式的N种实现方式
在开发中经常用到单例模式,单例模式也算是设计模式中最容易理解,也是最容易手写代码的模式,所以也常作为面试题来考.所以想总结一下单例模式的理论知识,方便同学们面试使用. 单例模式实现的方式只有两种类型, ...