比如，有一些書(shū)名或者標(biāo)題，默認(rèn)是沒(méi)有書(shū)名號(hào)的，結(jié)構(gòu)如下：

<h3class="books">靈境行者</h3>
<h3class="books">斗破蒼穹</h3>
<h3class="books">我?guī)熜謱?shí)在太穩(wěn)健了</h3>
...

有沒(méi)有什么辦法在不改變HTML的情況下加上書(shū)名號(hào)呢？??（例如某些情況下HTML由其他框架生成，無(wú)法直接改底層源碼）

進(jìn)一步，還需要書(shū)名號(hào)內(nèi)部實(shí)現(xiàn)文本超出省略，如下：

這就需要CSS動(dòng)態(tài)生成技術(shù)了，你有什么想法呢？一起看看吧。

一、使用偽元素生成書(shū)名號(hào)

沒(méi)錯(cuò)，很多同學(xué)可能會(huì)想到用偽元素，前后各添加一個(gè)就好了。

.books::before{
content:'《'
}
.books::after{
content:'》'
}

效果如下：

除了手動(dòng)使用偽元素生成偽元素外，還可以用 CSS quotes 來(lái)生成書(shū)名號(hào)。

.books{
quotes:"《""》"
}

但是，普通元素直接寫(xiě)這個(gè)沒(méi)什么效果，只有q標(biāo)簽才會(huì)顯示書(shū)名號(hào)。

<qclass="books">靈境行者</q>
<h3class="books">斗破蒼穹</h3>
<h3class="books">我?guī)熜謱?shí)在太穩(wěn)健了</h3>
...

原因是，q標(biāo)簽會(huì)自帶默認(rèn)樣式，自動(dòng)創(chuàng)建了偽元素。

所以，普通元素如果也想用quotes屬性，可以手動(dòng)添加：

.books::before{
content: open-quote
}
.books::after{
content: close-quote
}

效果如下：

不過(guò)這樣好像還不如直接使用偽元素方便了吧？??

二、書(shū)名號(hào)內(nèi)文本超出省略

CSS 單行文本超出省略很容易，只需要下面 3 行。

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

當(dāng)寬度比較小時(shí)，部分標(biāo)題也發(fā)生了省略，如下：

有設(shè)計(jì)師表示，這樣不是很好看????♀?，這個(gè)省略號(hào)能否在書(shū)名號(hào)里面呢，就像這樣。

正常情況下，我們會(huì)選擇給中間的文本額外新增一層標(biāo)簽，然后把文字省略設(shè)置在這個(gè)標(biāo)簽上。

<qclass="books"><span>靈境行者</span></q>
<h3class="books"><span>斗破蒼穹</span></h3>
<h3class="books"><span>我?guī)熜謱?shí)在太穩(wěn)健了</span></h3>
...

但是如果無(wú)法更改HTML結(jié)構(gòu)，這里有辦法只用一層標(biāo)簽實(shí)現(xiàn)嗎？

當(dāng)然也是有的，下面介紹兩個(gè)思路。

三、好用的絕對(duì)定位

書(shū)名號(hào)之所以會(huì)連同文本一起被省略，在于和標(biāo)題文本處于同一文本流中，所以需要將這個(gè)書(shū)名號(hào)提取出來(lái)，脫離這個(gè)文本流。

首先可以想到的是絕對(duì)定位，需要注意給右側(cè)留一點(diǎn)內(nèi)邊距（不然就重疊了），這里給「一個(gè)字號(hào)寬度」。

.books{
position: relative;
padding-right:1em;/*只能大概給一個(gè)固定距離*/
}
.books::after{
position: absolute;
right:0;
}

效果如下：

由于是塊級(jí)元素，寬度默認(rèn)撐滿，所以書(shū)名號(hào)跑到最右邊了，可以給元素加一個(gè)最大寬度為文本寬度。

.books{
/**/
max-width: fit-content;
}

這樣就正常了。

完整代碼可以查看：https://codepen.io/xboxyan/pen/emOBeGa[1]

四、有些冷門(mén)的浮動(dòng)

除了前面的絕對(duì)定位，浮動(dòng)也能實(shí)現(xiàn)類(lèi)似的效果。

.books::after{
float: right
}

效果如下：

但是當(dāng)文本過(guò)長(zhǎng)時(shí)，浮動(dòng)元素掉下來(lái)了，并沒(méi)有實(shí)現(xiàn)環(huán)繞效果。

其實(shí)，這個(gè)跟文檔的順序有關(guān)，浮動(dòng)元素必須位于前面才行，也就是::before元素才可以，我們?cè)囋嚒?/p>

.books::before{
float: right
}

效果如下，很好的位于最右側(cè)（紅色部分）。

那么現(xiàn)在問(wèn)題來(lái)了，::before被用掉了，用于生成右書(shū)名號(hào)，那通過(guò)什么來(lái)生成左書(shū)名號(hào)呢？

思索了一番，整個(gè)CSS中還有一個(gè)偽元素可以生成文本，那就是::marker，而且也位于左側(cè)。不過(guò)需要設(shè)置display屬性為list-item才會(huì)出現(xiàn)。

.books{
/**/
display: list-item;
list-style-position: inside;
}
.books::marker{
content:'《';
}
.books::before{
content:"》";
float: right;
color:red;
}

這樣就能代替原本的::before生成左書(shū)名號(hào)了（左側(cè)是::marker，右側(cè)是::before）。

同樣還有最大寬度的問(wèn)題。

.books{
/**/
max-width: fit-content;
}

同樣能實(shí)現(xiàn)類(lèi)似的效果，相比絕對(duì)定位來(lái)說(shuō)，無(wú)需給一個(gè)“大概”的右內(nèi)邊距。

完整代碼可以查看：https://codepen.io/xboxyan/pen/ZYzBajg[2]

五、總結(jié)一下

以上就是本文的全部技巧了，你學(xué)到了？下面總結(jié)一下：

1. 某些情況下HTML由其他框架生成，無(wú)法直接改底層源碼，這就需要使用CSS動(dòng)態(tài)生成技術(shù)了
2. 使用兩個(gè)偽元素可以很輕松生成前后兩個(gè)書(shū)名號(hào)
3. 還可以用 CSS quotes 來(lái)生成書(shū)名號(hào)，不過(guò)只針對(duì)q元素生效
4. 默認(rèn)情況下，文本省略會(huì)把右側(cè)的書(shū)名號(hào)也省略
5. 書(shū)名號(hào)之所以會(huì)連同文本一起被省略，在于和標(biāo)題文本處于同一文本流中，需要把右側(cè)書(shū)名號(hào)脫離文本流。
6. 絕對(duì)定位居右定位可以脫離文本流，不過(guò)需要預(yù)留一點(diǎn)空間，不然會(huì)和下面的文本重疊
7. 塊級(jí)元素寬度默認(rèn)撐滿，可以設(shè)置寬度為fit-content自適應(yīng)文字寬度
8. 浮動(dòng)布局也可以脫離文本流，不過(guò)要求浮動(dòng)元素在HTML結(jié)構(gòu)中的左側(cè)，::after元素在文本右側(cè)，無(wú)法使用浮動(dòng)實(shí)現(xiàn)該效果
9. 除了偽元素，還可以通過(guò)::marker來(lái)生成內(nèi)容，而且也位于文本左側(cè)
10. 使用:marker生成左側(cè)書(shū)名號(hào)，::brfore生成右側(cè)書(shū)名號(hào)，相比絕對(duì)定位的優(yōu)勢(shì)是，無(wú)需給定一個(gè)"大概"的右內(nèi)邊距