一、使用伪元素生成书名号没错,很多同学可能会想到用伪元素,前后各添加一个就好了.books::before{
content: '《'
}
.books::after{
content: '》'
}效果如下
除了手动使用伪元素生成伪元素外,还可以用 CSS quotes 来生成书名号.books{
quotes: "《" "》"
}但是,普通元素直接写这个没什么效果,只有q标签才会显示书名号灵境行者
斗破苍穹
我师兄实在太稳健了
...

原因是,q标签会自带默认样式,自动创建了伪元素

所以,普通元素如果也想用quotes属性,可以手动添加.books::before{
content: open-quote
}
.books::after{
content: close-quote
}效果如下

不过这样好像还不如直接使用伪元素方便了吧?二、书名号内文本超出省略CSS 单行文本超出省略很容易,只需要下面 3 行white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;当宽度比较小时,部分标题也发生了省略,如下

有设计师表示,这样不是很好看♀️,这个省略号能否在书名号里面呢,就像这样

正常情况下,我们会选择给中间的文本额外新增一层标签,然后把文字省略设置在这个标签上
灵境行者
斗破苍穹
我师兄实在太稳健了
...但是如果无法更改HTML结构,这里有办法只用一层标签实现吗?当然也是有的,下面介绍两个思路