html怎么设置只显示一行,如何利用CSS控制文本只在一行显示(不换行)

我们在做前端时，经常会要求文字只在一行显示。当一行文字超过DIV或者Table的宽度的时候，浏览器中默认是让它换行显示的，如果不想让他换行要怎么办呢？通过CSS中的word-break,white-space可以达到不换行的效果。

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

}

注：这个只对单行的文字的效，如果你想把它用在多行上，也只有第一行有作用的。这个写法只有IE会有"..."，其它的浏览器文本超出指定宽度时会隐藏。

声明:如需转载，请注明来源于www.webym.net并保留原文链接：http://www.webym.net/jiaocheng/7.html

html怎么设置只显示一行,如何利用CSS控制文本只在一行显示(不换行)相关推荐

css控制文本只显示两行
text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box ...
CSS控制文本超出打点显示
CSS控制文本超出打点显示 1 单行文本过长打点 2 多行文本打点显示 3 涉及的属性 3.1 white-space 3.2 text-overflow 1 单行文本过长打点只有1行文本时,需要满 ...
html中控制在一行显示出来,CSS控制文字只显示一行，超出部分显示省略号
之前使用过这个例子,现在总结说明一下: 先给贴代码: 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 测 ...
[JavaScript]利用JavaScript控制table中row的显示
在程序中有时候我们需要根据选择来显示我们需要的信息,通过控制table中row的显示可以实现这样的功能. NoneRow1Row2Row3 Row1 Row2 Row3 JavaScript < ...
html字体超出后隐藏省略号,CSS控制文字超出部分省略号显示
一:单行文本显示不完时,我们只需要设置单行文本的宽度,不允许换行,溢出隐藏及换行省略四个属性即可: p{ max-width: 100px; overflow:hidden; text-overflo ...
css实现文本超出宽度省略号显示
2019独角兽企业重金招聘Python工程师标准>>> 单行文本超出宽度省略号显示 .text {width:20px;overflow:hidden;text-overfolw:e ...
微信小程序-控制文本只显示若干行多余隐藏
效果图显示三行的效果图代码 <text class='intro_info'>{{item.introduction}}</text> /*设置text显示行数,多余的省略 ...
CSS 控制 input 只显示下划线效果
由于页面设计需要,有时我们可能会出现只有下划线(底部边框)的input,如下图所示那么怎么实现这种效果呢? 其实很简单,只要从边框(border)入手就可以了比如将上.右.左边框宽度设置为0,下边 ...
CSS 控制 input 只显示下划线效果 1
由于页面设计需要,有时我们可能会出现只有下划线(底部边框)的input,如下图所示那么怎么实现这种效果呢? 其实很简单,只要从边框(border)入手就可以了比如将上.右.左边框宽度设置为0,下边 ...

html怎么设置只显示一行,如何利用CSS控制文本只在一行显示(不换行)

html怎么设置只显示一行,如何利用CSS控制文本只在一行显示(不换行)相关推荐

最新文章

热门文章