标题添加书名号并超出省略

一、使用伪元素生成书名号没错，很多同学可能会想到用伪元素，前后各添加一个就好了.books::before{
content: '《'
}
.books::after{
content: '》'
}效果如下

除了手动使用伪元素生成伪元素外，还可以用 CSS quotes 来生成书名号.books{
quotes: "《" "》"
}但是，普通元素直接写这个没什么效果，只有q标签才会显示书名号<q class="books">灵境行者</q>
<h3 class="books">斗破苍穹</h3>
<h3 class="books">我师兄实在太稳健了</h3>
...

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

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

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

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

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