当一行文字超过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. (网络流)ACM Computer Factory --POJ --3436

    链接: http://poj.org/problem?id=3436 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82835#probl ...

  2. 几个经典的数学库之一学习---VCGlib(3)

    Camera and shot abstraction for managing views 视图的定义,以及mesh的操作说明. Shot(镜头) and camera(相机) shot摄像结构以及 ...

  3. VTK7.0.0编译安装心得

    配置:Win7(64bit)+VS2013+VTK700+QT5 (为了编译适应所用工业设备32bit,所有编译凑在32bit下进行) 预安装: (1)安装CMake软件,用于编译重构VTK源文件,编 ...

  4. hdu 4983 欧拉函数

    http://acm.hdu.edu.cn/showproblem.php?pid=4983 求有多少对元组满足题目中的公式. 对于K=1的情况,等价于gcd(A, N) * gcd(B, N) = ...

  5. Python学习-1.安装Python

    到Python的官方网站 https://www.python.org/downloads/ 下载官方的安装包 https://www.python.org/ftp/python/3.4.1/pyth ...

  6. CUDA开发 - CUDA 版本

    "CUDA runtime is insufficient with CUDA driver"CUDA 9.2: 396.xx CUDA 9.1: 387.xx CUDA 9.0: ...

  7. 为上海莫大型重工企业提供基于TFS的软件研发流程管理培训

    这周,和微软公司的朋友一起,受上海莫大型重工企业的要求,为企业软件部门一个60多人的软件团队提供了为其2天的全流程培训,培训基于微软Team Foundation Server 2017(TFS 20 ...

  8. 解决MS SQL Server 使用HashBytes函数乱码问题

    HASHBYTES 语法(参考MSDN): HASHBYTES ( '<algorithm>', { @input | 'input' } ) <algorithm>::= M ...

  9. ASP.NET Core 2 学习笔记(五)静态文件

    之前的ASP.NET网站,只要把*.html.*.css.*.jpg.*.png.*.js等静态文件放在项目根目录,默认都可以直接被浏览:但ASP.NET Core 小改了浏览静态文件的方式,默认根目 ...

  10. Docker容器的原理与实践 (下)

    欢迎访问网易云社区,了解更多网易技术产品运营经验. Docker原理分析 Docker架构 镜像原理 镜像是一个只读的容器模板,含有启动docker容器所需的文件系统结构及内容Docker以镜像和在镜 ...