使用CSS給標題添加書名號并超出省略
比如，有一些書名或者標題，默認是沒有書名號的，結構如下：
<h3class="books">靈境行者</h3>
<h3class="books">斗破蒼穹</h3>
<h3class="books">我師兄實在太穩健了</h3>
...
有沒有什么辦法在不改變HTML的情況下加上書名號呢？??（例如某些情況下HTML由其他框架生成，無法直接改底層源碼）
進一步，還需要書名號內部實現文本超出省略，如下：
這就需要CSS動態生成技術了，你有什么想法呢？一起看看吧。
一、使用偽元素生成書名號
沒錯，很多同學可能會想到用偽元素，前后各添加一個就好了。
.books::before{
content:'《'
}
.books::after{
content:'》'
}效果如下：
除了手動使用偽元素生成偽元素外，還可以用 CSS quotes 來生成書名號。
.books{
quotes:"《""》"
}但是，普通元素直接寫這個沒什么效果，只有q標簽才會顯示書名號。
<qclass="books">靈境行者</q>
<h3class="books">斗破蒼穹</h3>
<h3class="books">我師兄實在太穩健了</h3>
...
原因是，q標簽會自帶默認樣式，自動創建了偽元素。
所以，普通元素如果也想用quotes屬性，可以手動添加：
.books::before{
content: open-quote
}
.books::after{
content: close-quote
}效果如下：
不過這樣好像還不如直接使用偽元素方便了吧？??
二、書名號內文本超出省略
CSS 單行文本超出省略很容易，只需要下面 3 行。
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;當寬度比較小時，部分標題也發生了省略，如下：
有設計師表示，這樣不是很好看????♀?，這個省略號能否在書名號里面呢，就像這樣。
正常情況下，我們會選擇給中間的文本額外新增一層標簽，然后把文字省略設置在這個標簽上。
<qclass="books"><span>靈境行者</span></q>
<h3class="books"><span>斗破蒼穹</span></h3>
<h3class="books"><span>我師兄實在太穩健了</span></h3>
...但是如果無法更改HTML結構，這里有辦法只用一層標簽實現嗎？
當然也是有的，下面介紹兩個思路。
三、好用的絕對定位
書名號之所以會連同文本一起被省略，在于和標題文本處于同一文本流中，所以需要將這個書名號提取出來，脫離這個文本流。
首先可以想到的是絕對定位，需要注意給右側留一點內邊距（不然就重疊了），這里給「一個字號寬度」。
.books{
position: relative;
padding-right:1em;/*只能大概給一個固定距離*/
}
.books::after{
position: absolute;
right:0;
}效果如下：
由于是塊級元素，寬度默認撐滿，所以書名號跑到最右邊了，可以給元素加一個最大寬度為文本寬度。
.books{
/**/
max-width: fit-content;
}這樣就正常了。
完整代碼可以查看：https://codepen.io/xboxyan/pen/emOBeGa[1]
四、有些冷門的浮動
除了前面的絕對定位，浮動也能實現類似的效果。
.books::after{
float: right
}效果如下：
但是當文本過長時，浮動元素掉下來了，并沒有實現環繞效果。
其實，這個跟文檔的順序有關，浮動元素必須位于前面才行，也就是::before元素才可以，我們試試。
.books::before{
float: right
}效果如下，很好的位于最右側（紅色部分）。
那么現在問題來了，::before被用掉了，用于生成右書名號，那通過什么來生成左書名號呢？
思索了一番，整個CSS中還有一個偽元素可以生成文本，那就是::marker，而且也位于左側。不過需要設置display屬性為list-item才會出現。
.books{
/**/
display: list-item;
list-style-position: inside;
}
.books::marker{
content:'《';
}
.books::before{
content:"》";
float: right;
color:red;
}這樣就能代替原本的::before生成左書名號了（左側是::marker，右側是::before）。
同樣還有最大寬度的問題。
.books{
/**/
max-width: fit-content;
}同樣能實現類似的效果，相比絕對定位來說，無需給一個“大概”的右內邊距。
完整代碼可以查看：https://codepen.io/xboxyan/pen/ZYzBajg[2]
五、總結一下
以上就是本文的全部技巧了，你學到了？下面總結一下：
- 某些情況下HTML由其他框架生成，無法直接改底層源碼，這就需要使用CSS動態生成技術了
- 使用兩個偽元素可以很輕松生成前后兩個書名號
- 還可以用 CSS quotes 來生成書名號，不過只針對q元素生效
- 默認情況下，文本省略會把右側的書名號也省略
- 書名號之所以會連同文本一起被省略，在于和標題文本處于同一文本流中，需要把右側書名號脫離文本流。
- 絕對定位居右定位可以脫離文本流，不過需要預留一點空間，不然會和下面的文本重疊
- 塊級元素寬度默認撐滿，可以設置寬度為fit-content自適應文字寬度
- 浮動布局也可以脫離文本流，不過要求浮動元素在HTML結構中的左側，::after元素在文本右側，無法使用浮動實現該效果
- 除了偽元素，還可以通過::marker來生成內容，而且也位于文本左側
- 使用:marker生成左側書名號，::brfore生成右側書名號，相比絕對定位的優勢是，無需給定一個"大概"的右內邊距
