您现在的位置是：网站首页> 编程资料编程资料

div+CSS设置一行内文字超过宽度不换行且不显示截断文字加...CSS控制文字换行、裁剪css控制文字自动换行的实现方法html、css 禁止文字自动换行属性word-breakcss固定宽度并且让最后一行文字换行css 解决英文字符与阿位伯数字自动换行 css是如何实现在页面文字不换行、自动换行、强制换行的方法

2023-10-26 187人已围观

简介当一行文字超过DIV或者Table的宽度的时候，浏览器中默认是让它换行显示的，如果我们不想让他换行显示那要怎么办呢，下面为大家介绍下如何设置div+CSS设置一行内文字超过宽度不换行且不显示

当一行文字超过DIV或者Table的宽度的时候，浏览器中默认是让它换行显示的，如果我们不想让他换行显示那要怎么办呢？看到这个标题很容易就会想到截断文字加“...”的做法。

一般的文字截断(适用于内联与块)：
==============CSS================

复制代码

代码如下:

.text-overflow{
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

=================================

对于表格的话，定义有一点不一样：
==============CSS================

复制代码

代码如下:

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会有“...”，其它的浏览器文本超出指定宽度时会隐藏。

上一篇：CSS样式设置div滚动条示例代码纯div+css实现的固定在网站底部不随网站滚动的在线客服特效源码CSS控制DIV永远固定在页面底部不随滚动而滚动css将div层固定显示在页面底部不随滚动条滚动css实现div自动添加滚动条(图片或文字等超出时显示)div css 滚动条样式 DIV滚动条属性及样式设置方式css 给div添加滚动并隐藏滚动条

下一篇：margin折叠的问题探讨CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢