CSS控制字体在一行内显示不换行
当一行文字超过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控制字体在一行内显示不换行的更多相关文章
- 用CSS让字体在一行内显示不换行(收藏)
当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢? 用CSS让文字在一行内显示不换行的方法 一般的文字截断(适用于内联与块): .text- ...
- 用CSS让字体在一行内显示不换行
青枫 , 2012/07/13 18:08 , css样式设计 , 评论(0) , 阅读(2189) , Via 本站原创 大 | 中 | 小 当一行文字超过DIV或者Table的宽度的时候,浏览器 ...
- CSS控制文本在一行内显示,若有多余字符则使用省略号表示
强制文本在一行内显示,多余字符使用省略号 text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
- CSS强制文本在一行内显示若有多余字符则使用省略号表示
这篇文章主要介绍了强制文本在一行内显示,多余字符使用省略号,设置或检索是否使用一个省略标记(...)标示对象内文本的溢出.对应的脚本特性为textOverflow 设置或检索是否使用一个省略标记(.. ...
- CSS+DIV实现文字一行内显示,并且过多的文字以点来代替
有些时候我们在使用CSS+DIV进行排版实现大量的文字的时候,为了页面的美观,这里需要将文字在div中一行显示,并且将过多的文字进行隐藏,以点号进行代替.当鼠标放上面的时候会以title的形式显示所有 ...
- css让文字在一行内显示
1.例如 p元素,里面的文字不换行显示,超出部分不隐藏 p{ width:100px; word-break:keep-all; white-space:nowrap; } 2.例如 p元素,里面的文 ...
- CSS浮动属性,知道原理就很简单,灵活控制块级元素在一行内显示
在页面布局中,有两个非常常用的CSS属性.它们巧妙的控制着块级元素们之间的位置,灵活的让块级元素在一行内显示或者另起一行.说到这里,相信大家已经猜出来了,这两个属性就是控制块级元素浮动的属性.整个页面 ...
- white-space norma nowrap强制同一行内显示所有文本文字,让所有文字内容中一排显示不换行
日常我们为了让文字内容在一行内显示完,哪怕宽度不够也不能换行,我们可以使用white-space样式,但如果遇到了html br强制换行标签,无论是设置white-space与否都会被<br&g ...
- css控制标题长度超出部分显示省略号
width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; 设置或检索是否使用一个省略标记(...)标示对象内文本 ...
随机推荐
- (二分匹配 模板 KM)奔小康赚大钱--hdu--2255
链接: http://acm.hdu.edu.cn/showproblem.php?pid=2255 代码: #include <iostream> #include <cstdio ...
- 20155209 2016-2017-2 《Java程序设计》第八周学习总结
20155209 2016-2017-2 <Java程序设计>第八周学习总结 教材学习内容总结 Java NIO(New IO)是一个可以替代标准Java IO API的IO API(从J ...
- hdu 2058 The sum problem(数学题)
一个数学问题:copy了别人的博客 #include<cstdio> #include<cstdlib> #include<cmath> int main() { ...
- hdu 5014 异或序列
http://acm.hdu.edu.cn/showproblem.php?pid=5014 从最大的一个数开始找能配对使他们的异或值最大的一个数 最后输出 #include <cstdio&g ...
- RelativeLayout中最底的View一个View.layout_marginBottom无效
处理一个Dialog,发现RelativeLayout布局下最后一个View的layout_marginBottom会失效. 效果图见: 解决方法为: 在最底或最右的组件后面再加个View吧... 这 ...
- Oracle/PLSQL: BitAnd Function
BITAND 函数 本文介绍 Microsoft Excel 中 BITAND 函数的公式语法和用法. 说明 返回两个数的按位“与”. 语法 BITAND( number1, number2) BIT ...
- JavaScript中Ajax的使用
AJAX全称为“Asynchronous javascript and XML”(异步javascript和XML),是指一种创建交互式网页应用的网页开发技术.通过在后台与服务器进行少量数据交换,AJ ...
- [ACM_暴力] 最多交换k个数的顺序,求a[i]的最大连续和
/* http://codeforces.com/contest/426/problem/C 最多交换k个数的顺序,求a[i]的最大连续和 爆解 思路:Lets backtrack interval ...
- Hibernate与Jpa的关系
JPA全称Java Persistence API.JPA通过JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中. JPA的总体思想和现有Hibernate.T ...
- SVG系列教程:SVG简介与嵌入HTML页面的方式
地址:http://www.w3cplus.com/html5/svg-introduction-and-embedded-html-page.html 随着技术向前的推进,SVG相关的讨论也越渐频繁 ...