white-space：僞元素上的nowrap

我有一個元素設置爲a {display: inline-block;}。我添加了一個僞元素a:after {display: inline-block;}。現在，如果我設置了一個父元素white-space: nowrap，我預計a和a:after將始終保持在同一行上。這句話是否正確？因爲我在實現預期效果方面遇到了一些困難。white-space：僞元素上的nowrap

來源

2014-11-14 Dimt

請，您可以共享足夠的代碼來重現問題？ – LcSalazar 2014-11-14 15:26:55

我現在使用的代碼是大型HTML文件的一部分。下面的答案顯示了我正在做的事情。謝謝@Praveen。 – Dimt 2014-11-14 15:37:49

*問題*應該解釋問題所在。 – 2014-11-14 16:28:31

不，:pseudo元素不能像這樣工作！他們不會從父母繼承父母的文字樣式。

a {display: inline-block; white-space: nowrap;} 
 
a:after {display: inline-block; white-space: nowrap; content: 'Hello, how are you?'; width: 50px; border: 1px solid #ccc; overflow: hidden;}

<a href="#">Hello!</a>

來源

2014-11-14 15:29:40

你能否提出任何解決方法來保持這兩個元素在同一行？我需要的是隱藏元素，而不是打破這條線。 – Dimt 2014-11-14 15:42:17

@Dimt使用'overflow：hidden;'查看更新後的答案！ '：）' – 2014-11-14 15:50:20

目前還不清楚這個問題究竟是什麼，目前還不清楚這個問題是如何解決的以及如何解決的。它做出了一個不正確的聲明：僞元素會繼承屬性。此外，「空白」本質上影響元素的所有文本內容，包括子節點。 – 2014-11-14 16:35:49

white-space：僞元素上的nowrap

回答

相關問題