游客

标题: CSS对文本长度超过宽度的处理办法
正文:
在编写网页显示文本内容时，肯定会遇到文本的长度超长，超出了网页的宽度，或者超出了表格的宽度，超出了层的宽度等，那么可以很简单的使用CSS控制显示的文本内容的宽度，将多于的部分裁剪掉，并显示..." "在编写网页显示文本内容时，肯定会遇到文本的长度超长，超出了网页的宽度，或者超出了表格的宽度，超出了层的宽度等，那么可以很简单的使用CSS控制显示的文本内容的宽度，将多于的部分裁剪掉，并显示... 对于tabel标签，使用下面的代码：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;一起使用。*/} 对于Body和层Div标签，使用下面的代码：body { overflow: hidden; }div { overflow: scroll; height: 100px; width: 100px; } 一般的块或者内联模块，可以使用下面的代码，div中也可以使用：.text-overflow {display:block;/*内联对象需加*/width:31em;word-break:keep-all;/* 不换行 */white-space:nowrap;/* 不换行 */overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/} 对于经常使用的列表标签，使用下面的代码：li { width:200px; white-space:nowrap; text-overflow:ellipsis; overflow: hidden; } 当然，如过你需要很好的效果，还是
[<<][[1]][2][>>]

查看评论(0)
发表评论



首页