用CSS让字体在一行内显示不换行(收藏)
当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢?
用CSS让文字在一行内显示不换行的方法
display:block; /*内联对象需加*/
width:31em;
word-break:keep-all; /* 不换行 */
white-space:nowrap; /* 不换行 */
overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}
对于表格,定义有点不一样:
width:30em;
table-layout:fixed; /* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all; /* 不换行 */
white-space:nowrap; /* 不换行 */
overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}
注:这个只对单行的文字的效,如果你想把它用在多行上,也只有第一行有作用的。 这个写法只有IE会有“...”,其它的浏览器文本超出指定宽度时会隐藏。
用CSS让字体在一行内显示不换行(收藏)的更多相关文章
- 用CSS让字体在一行内显示不换行
青枫 , 2012/07/13 18:08 , css样式设计 , 评论(0) , 阅读(2189) , Via 本站原创 大 | 中 | 小 当一行文字超过DIV或者Table的宽度的时候,浏览器 ...
- CSS控制字体在一行内显示不换行
当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢?用CSS让文字在一行内显示不换行的方法: 一般的文字截断(适用于内联与块): .text-ov ...
- CSS强制文本在一行内显示若有多余字符则使用省略号表示
这篇文章主要介绍了强制文本在一行内显示,多余字符使用省略号,设置或检索是否使用一个省略标记(...)标示对象内文本的溢出.对应的脚本特性为textOverflow 设置或检索是否使用一个省略标记(.. ...
- CSS控制文本在一行内显示,若有多余字符则使用省略号表示
强制文本在一行内显示,多余字符使用省略号 text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
- 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 一行内显示 超出自动隐藏
一般的文字截断(适用于内联与块): Example Source Code [www.mb5u.com].text-overflow {display:block;/*内联对象需加*/width:31 ...
随机推荐
- php5.2转向 PHP 5.3 的 PHP 开发
PHP 5.3 开始,为了更好的向 PHP 的未来版本(PHP6) 过渡,将未来不再支持的函数标记为 DEPRECATED.在代码中使用这些函数,将毫不留情的在页面中显示警告信息:“使用了过时的函数… ...
- Apache加载PHP.ini顺序
网上找到一份关于Apache加载PHP.ini顺序的文档: (1) apache的httpd.conf中的PhpIniDir: (2) 注册表键值:HKEY_LOCAL_MACHINE->SOF ...
- 题目1003:A+B ---c_str(),atoi()函数的使用;remove , erase函数的使用
#include<stdio.h> #include<stdlib.h> int sw(char *a){ ,c=; while(a[i]){ ') c=c*+a[i]-'; ...
- java webservice AXIS
1. eclipse axis 插件下载地址 http://archive.apache.org/dist/ws/axis2/tools/1_4_1/ 一个是代码生成插件 axis2-ecli ...
- 动态定义数组 .xml
pre{ line-height:1; color:#3c3c3c; background-color:#d2c39b; font-size:16px;}.sysFunc{color:#627cf6; ...
- Hadoop2的简单安装
前面花了很多时间来介绍hadoop1的安装,随着hadoop的发展,hadoop2的应用也越来越普及,hadoop2解决了hadoop1中的很多问题,比如单点故障,namenode容量小的问题. 我们 ...
- Python面试必须要看的15个问题
本文由EarlGrey@编程派独家编译,转载请务必注明作者及出处. 原文:Sheena@codementor 译文:编程派 引言 想找一份Python开发工作吗?那你很可能得证明自己知道如何使用Pyt ...
- MapReduce阅读
1.mongodb权威指南6.4章 2.百科:http://baike.baidu.com/link?url=fl9FwgNq7gtFLwJ-GuKsJ25Uk-wnhgDjEwkKd8-5hoIkh ...
- Eclipse或Myeclipse常用快捷键组合详解
Eclipse 是一个开放源代码的.基于Java的可扩展开发平台,就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境.. Eclipse(Myeclipse)中有很多便于开发的快捷键 ...
- Codeforces Educational Codeforces Round 15 C. Cellular Network
C. Cellular Network time limit per test 3 seconds memory limit per test 256 megabytes input standard ...