css td文字不换行怎样实现
css td文字不换行的实现办法:第一翻开响应的css代码;然后为表格table与td标签设定“white-space:nowrap;”样式即可使表格内文字不换行。
本教程操纵环境:Dell G3电脑、Windows7系统、HTML5&&CSS3版本。
引荐:《css视频教程》
css表格文字不换行的设定
许多时候,我们在项目开发中会显现,单元格内容由于太多致使的换行问题,让表格显得非常的丑陋。下面我们来看一下使用css设定表格内文字不换行的办法。
css可以通过为表格table与td标签设定white-space:nowrap;样式使表格内文字不换行。
代码如下:
/*让单元格内容过多时也不换行*/ #datasTablediv table td{ white-space: nowrap; }
white-space 属性设定怎样处置元素内的空白。
这个属性声明创立规划历程中怎样处置元素中的空白符。值 pre-wrap 和 pre-line 是 css 2.1 中新增的。
属性值:
normal 默许。空白会被阅读器忽略。
pre 空白会被阅读器保存。其行动方式相似 html 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在统一行上连续,直到碰到 <br> 标签为止。
pre-wrap 保存空白符序列,但是正常地停止换行。
pre-line 合并空白符序列,但是保存换行符。
inherit 规定应当从父元素继承 white-space 属性的值。
示例:
css代码:
table { border : 1px solid red; } td { white-space:nowrap; text-overflow:ellipsis; width:50px; overflow:hidden; display: block; }
html代码:
<table> <tr><td>此处文本超越设定的宽度</td></tr> </table>
以上就是css td文字不换行怎样实现的具体内容,更多请关注百分百源码网其它相关文章!