搜索到
2
篇与
的结果
-
![文本超出省略号]()
文本超出省略号 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>示例</title> <style> .single-line { padding: 5px; background-color: burlywood; white-space: nowrap; width: 300px; overflow: hidden; text-overflow: ellipsis; } .multi-line { padding: 5px; margin-top: 20px; background-color: darkcyan; width: 300px; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; max-height: calc(1.2em * 3); } </style> </head> <body> <div class="single-line"> 单行文本超出省略号，单行文本超出省略号，单行文本超出省略号，单行文本超出省略号，单行文本超出省略号，单行文本超出省略号， </div> <div class="multi-line"> 多行文本超出省略号，多行文本超出省略号，多行文本超出省略号，多行文本超出省略号，多行文本超出省略号，多行文本超出省略号，多行文本超出省略号，多行文本超出省略号，多行文本超出省略号，多行文本超出省略号，多行文本超出省略号，多行文本超出省略号， </div> </body> </html>代码中，white-space: normal 表示可以换行，display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: 3 表示超出部分隐藏并设置最多显示3行，max-height: calc(1.2em * 3) 表示最多显示3行并根据内容自适应高度。这里设置了最多显示3行文本。注意，-webkit-box-orient 只在 Safari 和 Chrome 上支持，如果需要在其他浏览器上兼容，可以使用 -ms-flexbox 和 display: -webkit-flex。 -
![修改被选中文本背景颜色与字体颜色]()
修改被选中文本背景颜色与字体颜色 使用::selection伪元素来选中被用户复制的文本，通过color属性设置选中文本的字体颜色。通过background-color属性来设置选中文本的背景颜色。示例<style> ::selection { color: blue !important; background-color: yellow !important; } </style> <p>这是一段文字，</p> <p>你可以尝试选中其中的一部分，看一下被选中的文本的颜色与背景颜色是否发生了改变。</p>选中其中一部分文本，被选中的文本会变成蓝色字体、黄色背景：!important 规则，强制应用了我们设定的 CSS 属性。记得要在 ::selection 伪元素后面加上:hover 状态，以上例子中如果你选中文本之后，再次用鼠标点击页面，选中高亮就会消失了。
