运用CSS截取题目长度方式

日期:2021-01-20 类型:科技新闻 

关键词:快速建站,网站建设系统,免费网页建站,网站免费建设,建站系统

网站中常常出現1些题目较为长的文章内容,再启用题目时以便使总体合理布局美观大方,必须将题目操纵在1行显示信息,而且截取1定的长度,截取的地区用省略号替代。尽管用动态性語言能够对其操纵,可是这样做是不好于检索模块收录的,而CSS凑巧妙地处理了这个难题,请看下面的编码:

编码1:用于非报表LI或span等都可以以

拷贝编码
编码以下:
.text-overflow {
display:block;/*内联目标需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 內容超过宽度时掩藏超过一部分的內容 */
text-overflow:ellipsis;/* 当目标内文字外溢时显示信息省略标识(...) ;需与overflow:hidden;1起应用。*/
}


编码2:用于报表

拷贝编码
编码以下:
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;1起应用。*/

上一篇:写html时,常常用到tab构造 返回下一篇:没有了