css如何解決文字和text-decoration:underline下劃線重疊問(wèn)題

這篇文章給大家分享的是有關(guān)css如何解決文字和text-decoration:underline下劃線重疊問(wèn)題的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

一、text-decoration:underline下劃線的問(wèn)題

CSS text-decoration:underline可以給內(nèi)聯(lián)文本增加下劃線，但是，如果對(duì)細(xì)節(jié)要求較高，就會(huì)發(fā)現(xiàn)，下劃線經(jīng)常會(huì)和中文文字的下邊緣搞在一起，英文的話甚至直接穿越，看起來(lái)就比較香菇藍(lán)瘦。

上圖幾個(gè)中文下邊緣正好都是橫線，結(jié)果，可以看到，基本上合在一起分不清誰(shuí)是誰(shuí)了，換成微軟雅黑字體（見下圖），似乎變本加厲了：

有沒有什么辦法讓下劃線不要靠得這么近，或者文字可以完整清晰地顯示呢？

有，方法還不少，下面逐一介紹，大家可以根據(jù)自己的實(shí)際項(xiàng)目需求，選擇合適的技術(shù)選型。

方法一：text-decoration-skip指定覆蓋關(guān)系

理論上，使用下面的CSS：

a { text-decoration-skip: ink; }

機(jī)會(huì)有類似下圖的效果：

text-decoration-skip是text-decoration相關(guān)的CSS3新的屬性，還有很多其他新的CSS3 text-decoration屬性，可以指定下劃線類型等，具體可參見我之前的文章：“了解CSS3 text-decoration新特性新表現(xiàn)”。

看上去效果很不錯(cuò)，但是遺憾的是，即使現(xiàn)在快到2017年了，此屬性的瀏覽器支持情況還是很不樂(lè)觀，包括大頭Chrome瀏覽器目前尚未支持。

Safari 8+ supports -webkit-text-decoration-skip with values none and skip (other values behave like none or skip)

目前也就是Safari 8+瀏覽器支持帶-webkit-私有前綴的text-decoration-skip屬性，且僅僅支持skip（默認(rèn)值）和none兩個(gè)值，換句話說(shuō)，Safari 8+瀏覽器默認(rèn)下劃線就是和文字非穿越而是避讓效果。這進(jìn)一步導(dǎo)致CSS代碼中沒有text-decoration-skip屬性出現(xiàn)的必要了。所以，此方法雖然最原生，但時(shí)機(jī)還不夠。

方法二：使用border-bottom屬性模擬

內(nèi)聯(lián)元素雖然不支持垂直方向的margin屬性，但是支持垂直方向的padding屬性和border屬性，并且，對(duì)原來(lái)的布局定位等沒有任何影響。因此，配合padding，我們就可以很有效地調(diào)節(jié)下邊框和文字下邊緣的距離，實(shí)現(xiàn)我們最想要的的效果，類似下面的CSS代碼：

a {
    text-decoration: none;
    border-bottom: 1px solid;
}

效果類似下圖：

如果覺得border-bottom模擬的下劃線還是和文字走得太近，我們可以使用padding-bottom再撐開點(diǎn)距離，例如：

a {
    text-decoration: none;
    border-bottom: 1px solid;
    padding-bottom: 5px;
}

則效果類似下面截圖：

眼見為實(shí)，您可以狠狠地點(diǎn)擊這里：border-bottom模擬下劃線文字無(wú)重疊demo

注意，使用border-bottom模擬下劃線的時(shí)候，border-color最好缺省，這樣就會(huì)使用文字的color顏色作為邊框色，這樣，鼠標(biāo)hover的時(shí)候，下劃線會(huì)自動(dòng)和文字一起變色，類似下圖效果：

使用border-bottom模擬的另外一個(gè)好處就是我們還可以使用虛線下劃線：

a {
    text-decoration: none;
    border-bottom: 1px dashed;
}

類似下面實(shí)際項(xiàng)目需求的截圖就可以使用這種策略：

方法三：使用box-shadow屬性模擬

我們也可以使用CSS3 box-shadow屬性模擬下劃線，代碼如下：

a {
    text-decoration: none;
    box-shadow: 0 1px;
}

同樣，建議顏色值缺省，使用color屬性的顏色值。

效果基本上和border-bottom如出一轍，如下截圖：

眼見為實(shí)，您可以狠狠地點(diǎn)擊這里：box-shadow模擬下劃線效果demo

相比border-bottom屬性，box-shadow的優(yōu)勢(shì)在于，即使我們把內(nèi)聯(lián)元素設(shè)置成display:inline-block，生成的下劃線也不會(huì)對(duì)垂直對(duì)齊或者布局產(chǎn)生影響，但，如果是border-bottom，會(huì)增加元素的尺寸，可能就會(huì)影響元素的排列。

但是，box-shadow也有不足，一是兼容性，IE9+才支持，二是只能實(shí)線，不能虛線。

方法四：使用background-image屬性模擬

就是使用CSS3漸變繪制實(shí)線或虛線背景圖。

效果截圖如下：

相關(guān)CSS代碼如下：

.solid {
    padding-bottom: 2px;
    background-image: linear-gradient(to top, currentColor, currentColor 1px, transparent 1px);
}
.dashed {
    padding-bottom: 2px;
    background: linear-gradient(to right, currentColor, currentColor 4px, transparent 4px) repeat-x 0 bottom/7px 1px;    
}

由于背景圖片是在原本區(qū)域內(nèi)顯示，有別于border-bottom或者box-shadow區(qū)域外顯示，因此，實(shí)現(xiàn)的下劃線實(shí)際上和文字還是很近的，尤其類似yqp這種基線以下的字母，就會(huì)合體。一般有兩種處理手段，一種是文字增加白色描邊，類似下面CSS：

a {
    text-shadow: 0 1px #fff, 0 -1px #fff, 1px 0 #fff, -1px 0 #fff;
}

效果類似下面這樣：

第二種就是使用padding-bottom對(duì)內(nèi)聯(lián)元素增加可視高度。所以，上面實(shí)線下劃線和虛線下劃線均有padding-bottom:2px的設(shè)置。

眼見為實(shí)，您可以狠狠地點(diǎn)擊這里：background-image模擬下劃線效果demo

對(duì)了，突然想起來(lái)，demo中的下劃線使用的是currentColor變量，但是在Chrome瀏覽器和IE瀏覽器下，currentColor作為背景圖片色值的時(shí)候，當(dāng):hover改變?cè)氐?code>color顏色值的時(shí)候，背景圖片顏色并不會(huì)跟著變，F(xiàn)irefox瀏覽器的表現(xiàn)符合預(yù)期，因此，如果使用此方法，需要:hover時(shí)候，背景圖片重新繪制下。

使用background-image繪制的好處在于，我們對(duì)樣式的控制更靈活的，例如我們可以把線放在文字的后面，我們可以上下劃線，我們控制虛線的稀松程度，我們也可以使用圓點(diǎn)表示虛線，我們甚至也可以使用徑向漸變繪制波浪樣子的下劃線，甚至可以把線做成傾斜的等等。不足在于IE10+瀏覽器才支持。

方法五：使用SVG濾鏡處理

該SVG濾鏡相關(guān)HTML代碼如下：

<svg class="out">
  <filter id="svg-underline" primitiveUnits="objectBoundingBox"><!-- 原圖文基礎(chǔ)上水平垂直方向一點(diǎn)點(diǎn)擴(kuò)展并存儲(chǔ)到新的層上 --><feMorphology in="SourceGraphic" operator="dilate" radius="0.0075 0.05" result="outline"></feMorphology><!-- 一個(gè)藍(lán)色矩形，高度3%然后寬度100%，位置稍微往下一點(diǎn) --><feFlood flood-color="#34538b" width="1" height="0.03" x="0" y="0.9" result="underline"></feFlood><!-- 遮罩藍(lán)色矩形，這樣，文字重合部分邊緣會(huì)鏤空 --><feComposite in="underline" in2="outline" operator="out" result="underline"></feComposite>    <!-- 效果合體 --><feMerge>
      <feMergeNode in="underline"></feMergeNode>
      <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
  </filter>
</svg>

相關(guān)CSS代碼如下：

a {
    -webkit-filter: url('#svg-underline');
    filter: url('#svg-underline');
    text-decoration: none;
}

然后，實(shí)現(xiàn)的效果類似下面的截圖（截自Chrome瀏覽器）：

看上去很麻煩很啰嗦，hover變色還需要另外的處理，SVG濾鏡兼容性并不樂(lè)觀，IE現(xiàn)在都不支持，所以，這種方法的意義在哪里？

意義就在于可以實(shí)現(xiàn)真正意義上的text-decoration-skip效果，也就是下劃線和文字重疊的位置自動(dòng)從文字下面穿過(guò)，并且附近完全是真正的透明，仔細(xì)看上面截圖，可以看到，文字和下劃線接觸的位置的地方，看上去有1像素的接觸點(diǎn)是透明的。

原生的Safari外加SVG濾鏡下的Chrome/Firefox，也就是絕大多數(shù)瀏覽器都可以實(shí)現(xiàn)下劃線和文字自動(dòng)接觸點(diǎn)鏤空的效果。

眼見為實(shí)，您可以狠狠地點(diǎn)擊這里：使用SVG濾鏡模擬下劃線demo

方法六：使用canvas實(shí)現(xiàn)（著名的Underline.js）

Underline.js項(xiàng)目地址：https://github.com/wentin/underlineJS

作者是這位妹紙（圖片源自網(wǎng)絡(luò)）：

zhangwenting，目前任職于 Adobe Typekit。

underline.js同樣實(shí)現(xiàn)的是下劃線和文字重疊自動(dòng)避讓的效果，類似下圖：

您可以狠狠地點(diǎn)擊這里：canvas原理的underline.js解決下劃線重疊demo

基本上，下劃線文字穿越效果只有英文才好看，中文如果穿越，我去，基本上下劃線就沒了，尤其類似“金玉全王”這樣的漢字：

所以，對(duì)于中文，最好的效果還是避讓，就是直接線和文字留點(diǎn)距離，這樣是最好的。對(duì)于，英文為主的內(nèi)容，則text-decoration-skip效果確實(shí)還是挺有價(jià)值的。

根據(jù)我自己對(duì)underline.js的使用，發(fā)現(xiàn)，局限性還不小，內(nèi)聯(lián)元素最好要inline-block化，純inline生成的canvas的垂直位置不是很精準(zhǔn)，然后，不支持文字自動(dòng)換行下劃線折線顯示，畢竟canvas元素是個(gè)獨(dú)立的替換元素，跟圖片一樣，不可能換行時(shí)候分一半上面再一半下面。

基本上，適合用在局部一些大的標(biāo)語(yǔ)，標(biāo)題，slogon等位置或者追求視覺的官方網(wǎng)站或活動(dòng)頁(yè)面上使用。

感謝各位的閱讀！關(guān)于“css如何解決文字和text-decoration:underline下劃線重疊問(wèn)題”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！