文档章节

div+CSS设置一行内文字超过宽度不换行且不显示

emberma
 emberma
发布于 2014/06/25 09:52
字数 310
阅读 146
收藏 14
css

当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果我们不想让他换行显示那要怎么办呢?看到这个标题很容易就会想到截断文字加“...”的做法。

一般的文字截断(适用于内联与块):
==============CSS================ 
.text-overflow{
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}
=================================

对于表格的话,定义有一点不一样:
==============CSS================ 
table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/

=================================

div中文字超过自动换行的css样式

word-break:break-all;   
       overflow:hidden; 

---------------------------------

word-wrap:break-word;


本文转载自:http://blog.csdn.net/herb777/article/details/7652343

共有 人打赏支持
emberma
粉丝 1
博文 36
码字总数 13776
作品 0
武汉
程序员
div和表格中文字溢出时折行显示的处理

当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果我们不想让他换行显示那要怎么办呢?看到这个标题很容易就会想到截断文字加“...”的做法。 一般的文字截断(适...

prfy520
2013/12/18
0
0
button 与label

1.创建⼀一个 button :buttonWithType:UIButton*button=[UIButton buttonWithType:UIButtonTypeRoundedRect]; //加方法创建,不需要 release //创建⼀一个什么样的 button 用 buttonWithType......

迷途阳
2016/02/22
18
0
css防止ul下的li换行(li超出宽度变成…)代码

在使用css结合div布局的时候碰到了一个问题。 在一个规定宽度大小的ul里边 我把li的宽度定义为自动。企图让li根据内容长度来自动向左对齐排列。 例如宽度为210px的ul里 分别有4个li 这个4个l...

功夫panda
2013/01/09
0
2
div、p、td 的强制不换行及强制换行

关于强制不换行、强制换行的话题在网上已经被讨论了无数次,但我发现都不够全面,没有充分考虑各种浏览器、各种标签等情况,以致不兼容,所以我再来说说。由于 div 和 p 在本文的讨论中,效果...

王超
2014/03/20
0
0
爱创课堂每日一题八十一天-行内元素和块级元素的具体区别是什么?行内元素的pad

块级元素(block)特性:总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;内联元素(inline)特性:...

全栈web笔记
2017/12/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Docker学习笔记

Docker Resources All In One Docker 学习资源整理

OSC_fly
27分钟前
4
0
Android 安全逆向:篡改你的位置信息

篡改你的位置信息

蔡小鹏
27分钟前
3
0
SpringMVC 全局异常处理,返回json

1.在spring-mvc.xml中增加配置: 比如我的freemarker视图定义的是:/WEB-INF/template 我的页面则放在template下的common目录下,所以下方定义的是common/500,文件扩展名根据视图定义可以忽...

Gmupload
28分钟前
2
0
一篇文章搞定前端面试

本文旨在用最通俗的语言讲述最枯燥的基本知识 面试过前端的老铁都知道,对于前端,面试官喜欢一开始先问些HTML5新增元素啊特性啊,或者是js闭包啊原型啊,或者是css垂直水平居中怎么实现啊之...

Jack088
35分钟前
3
0
ajax 轮询请求后台服务器

<script type="text/javascript"> // var i=0; //声明轮询次数变量 $(document).ready(function(){ c = window.setInterval("getResult()",10000); //间隔多少秒去触发ajax }); function get......

15834278076
38分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部