隱藏除CSS第一個字母以外的所有文本？

19

你可以，但你的CSS是錯誤的。下面的版本起作用（至少在Chrome中）。它使dt不可見，併爲第一個字母定義了一個規則，以使其再次可見。

我也嘗試過與display一樣的方法，但這並不如預期。 visibility: hidden隱藏了內容，但保留了該元素，而display: none將其從流中移除，並使子元素（本例中的第一個字母）不可能再次變爲可見。

我也加了一個懸停，所以你可以懸停字母看dt的其餘部分。

dt { 
 
    visibility: hidden; 
 
} 
 
dt::first-letter { 
 
    visibility: visible; 
 
} 
 

 
/* Hover the first letter to see the rest */ 
 
dt:hover { 
 
    visibility: visible; 
 
}

Hover to see the rest: 
 
<dt>Lorum ipsum is a weird text</dt> 
 
<dt>Foo bar</dt>

副作用將是由該文本覆蓋的區域仍然是要求保護。也許這不是一個問題，但如果是這樣，你將需要一些其他的解決方案。一種可能性是使字體大小也爲dt0。這樣，文字太小，沒有空間。當然，如果它也包含圖像，將無濟於事。

由於它似乎不起作用，所以下面是使用font-size的替代方法。不太理想，但希望它仍然能解決您的問題。

dt { 
 
    font-size: 0; 
 
} 
 
dt::first-letter { 
 
    font-size: 1rem; 
 
} 
 

 
/* Hover the first letter to see the rest */ 
 
dt:hover { 
 
    font-size: 1em; 
 
}

Hover to see the rest: 
 
<dt>Lorum ipsum is a weird text</dt> 
 
<dt>Foo bar</dt>

來源

2016-04-25 09:32:39 GolezTrol

+12

似乎並沒有在Firefox上運行。即使懸停也沒有透露任何東西。 – Bakuriu

+0

確實。在FF上，整個文本是不可見的，甚至是第一個字母。這不應該發生，因爲它應該被允許使元素不可見，同時使其內容的一部分可見。感覺像一個錯誤。但是，作爲替代方案，您可能會考慮不隱藏文本，但將其設置爲透明或將字體設置爲0. – GolezTrol

+0

@Paulie_D'dt'應該是塊，但即使我向其添加了「display：block」它沒有幫助。 – GolezTrol

-1

試試這個....

.newline1::first-letter { 
 
    font-size: 200%; 
 
    color: #8A2BE2; 
 
} 
 
.newline2::first-letter { 
 
    /*color: transparent;*/ 
 
font-size: 0px; 
 
}

<div class="newline1"> 
 
Test Stackoverflow.com 
 
</div> 
 
<div class="newline2"> 
 
Test Stackoverflow.com 
 
</div>

.newline1::first-letter { 
 
    font-size: 200%; 
 
    color: #8A2BE2; 
 
} 
 
.newline2::first-letter { 
 
    color: transparent; 
 
}

<div class="newline1"> 
 
Test Stackoverflow.com 
 
</div> 
 
<div class="newline2"> 
 
Test Stackoverflow.com 
 
</div>

來源

2016-04-25 09:32:56

+4

這是如何回答這個問題的？問題不在於*隱藏*第一個字母，而是隱藏*字母的其餘部分... – Bakuriu

+0

這回答了一個完全不同的問題。我應該可以低估這個答案。 – wizzwizz4

11

我想你Ç一個試試這個：

.twitter{ 
 
     display: block; 
 
     color: transparent; 
 
    } 
 

 
    .twitter:first-letter{ 
 
     color: #000; 
 
    }

<div id="socialMedia"> 
 
    <a class="twitter">Twitter</a> 
 
</div> 
 
<div id="socialMedia"> 
 
    <a class="twitter">Google</a> 
 
</div>

也是這個fiddle

來源

2016-04-25 09:33:34 Jainam

+0

嗯，我部分拿回來：看起來不錯，在JSFiddle中工作，但不在Stack Snippet中。將於今天晚些時候提交錯誤報告。 – Kroltan

+0

對不起，但在我的Firefox中它看起來不錯 – Jainam

+0

請檢查小提琴鏈接 – Jainam

5

見你不能用僞元素選擇使用:not（見this）。

你可以做的是用另一種方式思考：透明化整個事物，然後用::first-letter着色。由於後者具有更高的特異性，因此將覆蓋透明設置，從而實現您想要的結果。

來源

2016-04-25 09:40:38 Dai

2

另一種基於Waruna的答案，使用color而不是基於佈局的屬性。主要優勢在於它可以在我測試過的每個瀏覽器上運行（Firefox，Chrome和M $ Edge，但可能適用於所有瀏覽器），並且不會導致任何視覺障礙（如第二種解決方案中的「基線跳躍像素」被接受的答案），因爲它使用了完全可視的屬性。

您的原始CSS的問題是您不能在:not中使用僞元素（::blah）。你必須把它擴展到了相反的邏輯，所以你不需要:not

dt { 
 
    color: transparent; 
 
} 
 
dt::first-letter { 
 
    color: black; 
 
} 
 

 
/* For testing */ 
 
dt:hover { 
 
    color: black; 
 
}

<dt>Hello World!</dt>

來源

2016-04-25 13:35:50 Kroltan

+1

我們是否真的需要另一個答案，讓每一種可能的方式使文本在css中不可見？最多這應該是對接受的答案的評論。「第三種選擇是使用'color：transparent'來隱藏和'color：black'來顯示」 – alexanderbird

+0

@alexanderbird這可以在沒有任何視覺干擾的每個瀏覽器上工作，這與可接受的解決方案不同。 – Kroltan

+1

啊！你會添加到你的答案？當我讀到它的時候，我問自己：「這是做什麼的，別人不做的？」 – alexanderbird

隱藏除CSS第一個字母以外的所有文本？

回答

相關問題