当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢?
用CSS让文字在一行内显示不换行的方法:

一般的文字截断(适用于内联与块):

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

对于表格,定义有点不一样:

 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;一起使用。*/
}

CSS控制字体在一行内显示不换行的更多相关文章

  1. 用CSS让字体在一行内显示不换行(收藏)

    当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢? 用CSS让文字在一行内显示不换行的方法   一般的文字截断(适用于内联与块): .text- ...

  2. 用CSS让字体在一行内显示不换行

    青枫 , 2012/07/13 18:08 , css样式设计 , 评论(0) , 阅读(2189) , Via 本站原创 大 | 中 | 小  当一行文字超过DIV或者Table的宽度的时候,浏览器 ...

  3. CSS控制文本在一行内显示,若有多余字符则使用省略号表示

    强制文本在一行内显示,多余字符使用省略号 text-overflow: ellipsis; overflow: hidden; white-space: nowrap;

  4. CSS强制文本在一行内显示若有多余字符则使用省略号表示

    这篇文章主要介绍了强制文本在一行内显示,多余字符使用省略号,设置或检索是否使用一个省略标记(...)标示对象内文本的溢出.对应的脚本特性为textOverflow 设置或检索是否使用一个省略标记(.. ...

  5. CSS+DIV实现文字一行内显示,并且过多的文字以点来代替

    有些时候我们在使用CSS+DIV进行排版实现大量的文字的时候,为了页面的美观,这里需要将文字在div中一行显示,并且将过多的文字进行隐藏,以点号进行代替.当鼠标放上面的时候会以title的形式显示所有 ...

  6. css让文字在一行内显示

    1.例如 p元素,里面的文字不换行显示,超出部分不隐藏 p{ width:100px; word-break:keep-all; white-space:nowrap; } 2.例如 p元素,里面的文 ...

  7. CSS浮动属性,知道原理就很简单,灵活控制块级元素在一行内显示

    在页面布局中,有两个非常常用的CSS属性.它们巧妙的控制着块级元素们之间的位置,灵活的让块级元素在一行内显示或者另起一行.说到这里,相信大家已经猜出来了,这两个属性就是控制块级元素浮动的属性.整个页面 ...

  8. white-space norma nowrap强制同一行内显示所有文本文字,让所有文字内容中一排显示不换行

    日常我们为了让文字内容在一行内显示完,哪怕宽度不够也不能换行,我们可以使用white-space样式,但如果遇到了html br强制换行标签,无论是设置white-space与否都会被<br&g ...

  9. css控制标题长度超出部分显示省略号

    width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; 设置或检索是否使用一个省略标记(...)标示对象内文本 ...

随机推荐

  1. (小数化分数)小数化分数2 -- HDU --1717

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=1717 举例: 0.24333333…………=(243-24)/900=73/3000.9545454…… ...

  2. OpenGl 中的基本数据类型

    OpenGl 中的基本数据类型 为了便于 OpenGL在各种平台上移植,OpenGL定义了自己的数据类型. 如果你愿意也可用这些数据类型对应的标准C的数据类型来替代.如OpenGL也定义 GLvoid ...

  3. mac与win7(台式电脑)共享文件

    人生处处又都坑,自己走过了,所以记下来. mac共享文件,win7访问: 1.系统偏好设置-共享-都选中就行.一般都会这样说. 2.系统偏好设置-用户与群组-解锁-客人用户-允许客人用户连接到共享文件 ...

  4. Corel Video Studio Pro X5

    视频编辑也是大学的时候接触过,依稀记得转场,字幕,滤镜,电子相册等的概念.自己也不经常用,所以实践经验比较少.正好接一个机会学习一下视频编辑,用的是会声会影X5. 需要的软件Photoshop,格式工 ...

  5. Using Integrated SOA Gateway in Oracle EBS(websevice)

    http://blog.csdn.net/pan_tian/article/details/10159935 Oracle EBS如何与第三方系统相集成?比如这样的需求,X系统知道物料编码,需要从EB ...

  6. Delphi 中 FindWindow 和 FindWindowEx 的语法和用法

    FindWindow(lpClassName,        {窗口的类名}lpWindowName: PChar {窗口的标题}): HWND;              {返回窗口的句柄; 失败返 ...

  7. Linux应用监控工具

    Linux下的监控工具丰富繁杂,如果只知道top.free之类的就太少了,而且也不能胜任日常的Linux管理工作,尤其是在排除Web服务器问题时. 本文给出5个Linux下功能更为强大的监控工具,有了 ...

  8. jQuery之noConflict() 方法

    jQuery 核心 - noConflict() 方法,运行这个函数将变量 $ 的控制权让渡给第一个实现它的那个库.这有助于确保jQuery不会与其他库的$对象发生冲突. noConflict() 方 ...

  9. day70 csrf简单用法 &Django ContentType

    一. 什么是跨站请求伪造 CSRF def transfer(request): if request.method =='POST': from_ =request.POST.get('from') ...

  10. java入门——第一个java程序

    来源:https://course.tianmaying.com/java-basic%2Bjava-hello-world# java的基础特征 1 Java是一种大小写敏感的语言 2 程序的文件名 ...