在编写网页时,难免会遇到文字内容过多而导致页面布局错乱的情况。为了解决这个问题,我们可以使用CSS来实现让两行文字溢出时变成省略号。 /* 设置最大宽度为200px,当文字内容超过两行时使用省略号来代
在编写网页时,难免会遇到文字内容过多而导致页面布局错乱的情况。为了解决这个问题,我们可以使用CSS来实现让两行文字溢出时变成省略号。
/* 设置最大宽度为200px,当文字内容超过两行时使用省略号来代替 */ p { max-width: 200px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */ }
以上代码使用了CSS的text-overflow属性来控制溢出时内容显示方式为省略号,使用display属性和-webkit-line-clamp属性来实现文字仅显示两行,并通过-webkit-box-orient属性将文字垂直排列。具体实现原理可以参考CSS的相关文档进行了解。
粉丝
0
关注
0
收藏
0