如何用 CSS 将超出显示宽度的内容隐藏起来

html-css014

如何用 CSS 将超出显示宽度的内容隐藏起来,第1张

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

.text-overflow

{display:block/*内联对象需加*/width:31em/*指定宽度*/word-break:keep-all/*

不换行

*/

white-space:nowrap/*

强制在同一行内显示所有文本,直到文本结束或者遭遇

br

对象。不换行

*/overflow:hidden/*

内容超出宽度时隐藏超出部分的内容

*/

text-overflow:ellipsis/*

IE

专有属性,当对象内文本溢出时显示省略标记(...)

;需与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一起使用。*/}需要注意的是,这个东东只对单行的文字的效,如果你想把它用在多行上,也只有第一行有作用的。

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:

div{

width: 100px

overflow:hidden

text-overflow:ellipsis

display:-webkit-box

-webkit-box-orient:vertical

-webkit-line-clamp:2

}

3、浏览器运行index.html页面,此时文字超过2行会自动把多余部分用省略号显示 。

div, ul, li{margin:0pxpadding:0px} <!--加上这句ul margin:0pxpadding:0px-->

ul, ul li {list-style-type:none}