li中内容太长，用省略号显示
/*所有浏览器都支持，只是显示字数多少不一样*/li { width:400px; white-space:nowrap; /*规定段落中的文本不进行换行*/ text-overflow:ellipsis; /*文字段在容器内超宽时，截断该文字段并且续以省略号*/ overflow: hidden;}-->
·
<style type="text/css">
<!--
/*所有浏览器都支持，只是显示字数多少不一样*/
li {
width:400px;
white-space:nowrap; /*规定段落中的文本不进行换行*/
text-overflow:ellipsis; /*文字段在容器内超宽时，截断该文字段并且续以省略号*/
overflow: hidden;
}
-->
</style>
<body>
<ul id="main">
<li>成品油调价的“靴子”落地。成品油价格上涨将在一定程度上推高CPI，对股市产生利空效应。具体到板块，石油石化板块将从油价上调中受益，此外煤炭、焦炭等传统能源，太阳能、风能等新能源也可能间接受益。航空、运输板块成本将再度增长对板块形成利空。此外，对汽车制造、高速公路也将形成利空。
</li>
<li>成品油调价的“靴子”落地。成品油价格上涨将在一定程度上推高CPI，对股市产生利空效应。具体到板块，石油石化板块将从油价上调中受益，此外煤炭、焦炭等传统能源，太阳能、风能等新能源也可能间接受益。航空、运输板块成本将再度增长对板块形成利空。此外，对汽车制造、高速公路也将形成利空。
</li>
<li>成品油调价的“靴子”落地。成品油价格上涨将在一定程度上推高CPI，对股市产生利空效应。具体到板块，石油石化板块将从油价上调中受益，此外煤炭、焦炭等传统能源，太阳能、风能等新能源也可能间接受益。航空、运输板块成本将再度增长对板块形成利空。此外，对汽车制造、高速公路也将形成利空。
</li>
</ul>
</body>
知识点：
white-space 属性设置如何处理元素内的空白。（此属性用于块对象）属性值有：
（1）normal :默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行。
（2）pre :用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对 齐。换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ，此属性可以使用，但是不会发生作用。结果等同于 normal 。
（3）nowrap :强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。
text-overflow设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。 对应的脚本特性为textOverflow。
（1）clip : 不显示省略标记（...），而是简单的裁切
<!--
/*所有浏览器都支持，只是显示字数多少不一样*/
li {
width:400px;
white-space:nowrap; /*规定段落中的文本不进行换行*/
text-overflow:ellipsis; /*文字段在容器内超宽时，截断该文字段并且续以省略号*/
overflow: hidden;
}
-->
</style>
<body>
<ul id="main">
<li>成品油调价的“靴子”落地。成品油价格上涨将在一定程度上推高CPI，对股市产生利空效应。具体到板块，石油石化板块将从油价上调中受益，此外煤炭、焦炭等传统能源，太阳能、风能等新能源也可能间接受益。航空、运输板块成本将再度增长对板块形成利空。此外，对汽车制造、高速公路也将形成利空。
</li>
<li>成品油调价的“靴子”落地。成品油价格上涨将在一定程度上推高CPI，对股市产生利空效应。具体到板块，石油石化板块将从油价上调中受益，此外煤炭、焦炭等传统能源，太阳能、风能等新能源也可能间接受益。航空、运输板块成本将再度增长对板块形成利空。此外，对汽车制造、高速公路也将形成利空。
</li>
<li>成品油调价的“靴子”落地。成品油价格上涨将在一定程度上推高CPI，对股市产生利空效应。具体到板块，石油石化板块将从油价上调中受益，此外煤炭、焦炭等传统能源，太阳能、风能等新能源也可能间接受益。航空、运输板块成本将再度增长对板块形成利空。此外，对汽车制造、高速公路也将形成利空。
</li>
</ul>
</body>
知识点：
white-space 属性设置如何处理元素内的空白。（此属性用于块对象）属性值有：
（1）normal :默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行。
（2）pre :用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对 齐。换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ，此属性可以使用，但是不会发生作用。结果等同于 normal 。
（3）nowrap :强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。
text-overflow设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。 对应的脚本特性为textOverflow。
（1）clip : 不显示省略标记（...），而是简单的裁切
（2）ellipsis : 当对象内文本溢出时显示省略标记（...）
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)