如何將CSS樣式僅應用於文本

我試圖將樣式應用於HTML文本之類的樣式。我想主要是：如何將CSS樣式僅應用於文本

我所得到的基本是：

正如你可以看到，第一行縮進，而不是任何其他線路。到目前爲止，我有一個<span>的文本，它嵌套在<div>的內部。

.slide-text .text { 
 
    background-color: rgba(0, 0, 0, .6); 
 
    color: #FFF; 
 
    padding: 8px 17px; 
 
} 
 
.slide-text .slide-title { 
 
    font-family: "Titillium Web", Arial, Helvetica, sans-serif; 
 
    font-weight: 700; 
 
} 
 
.slide-text .slide-content { 
 
    font-family: "Open Sans", Arial, Helvetica, sans-serif; 
 
    font-weight: 500; 
 
}

My HTML code is: 
 
<div class="slide-text"> 
 
    <div class="slide-title"><span class="text">[TITLE]</span> 
 
    </div> 
 
    <div class="slide-content"><span class="text">[TEXT]</span> 
 
    </div> 
 
</div>

他們工作的偉大，只要沒有標題或內容的多條線路。一旦它們超過兩條或更多條線，跨距就會失去內部填充。將內部跨度更改爲display: inline-block;可在其進入兩行時立即顯示塊顯示。有沒有辦法獲得我期待的效果？

來源

2015-11-10 Nate

經常檢查CSS-技巧:) https://css-tricks.com/multi-line-padded-text/ –

你能重新發布，作爲一個實際的答案？這樣我就可以把這個解決方案歸功於你。我從未想過在搜索中加入「多個」這個詞，否則我可能會自己找到它。這些例子在我的手機上運行，所以我充滿了希望。謝謝！ – Nate

CSS大師克里斯Coyier有一篇關於CSS-Tricks listing several methods to solve this的文章。一種方法是box-shadow。它已經被提及爲答案，但它需要更多的愛在現代Firefox中工作:)。

.multi-line-padded { 
 
    background: black; 
 
    color: white; 
 
    
 
    /* For the top and bottom padding */ 
 
    padding: 0.5em 0; 
 
    
 
    /* Text height (1.0) + compensate for padding (0.5 * 2) */ 
 
    line-height: 2; 
 
    
 
    /* For the left and right padding */ 
 
    /* Vendor prefixes FIRST */ 
 
    -webkit-box-shadow: 1em 0 0 black, -1em 0 0 black; 
 
    -moz-box-shadow: 1em 0 0 black, -1em 0 0 black; 
 
    box-shadow: 1em 0 0 black, -1em 0 0 black; 
 
    
 
    /* Firefox defaults to `box-decoration-break: split`, we need `clone` */ 
 
    box-decoration-break: clone; 
 
}

<p><span class="multi-line-padded">You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder.</span></p> 
 

 
<p style="text-align: right;"><span class="multi-line-padded"><a href="http://slipsum.com/" style="color: white;">Samuel L. Ipsum</a></span></p>

來源

2015-11-10 20:36:43

謝謝。這是完美的作品，甚至用我的半透明背景顏色來解決任何行距問題。謝謝。 – Nate

請按照this similar question的最佳答案中的示例進行操作。它基本上建議使用盒子陰影來創建填充。

span { 
    background:#ff0;color:#000; 
    box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0; 
    -moz-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0; 
    -webkit-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0; 
}

將縮進所有文字同樣，加入黃色填充（改變#ff0到你需要的任何HTML顏色值）。但是，您必須重新設置現有代碼的格式，因爲它會比陰影縮進更多。

來源

2015-11-10 18:50:03

謝謝。它工作得很好，雖然我給Josef正確答案只是因爲它考慮了行間距，但基本上box-shadow保存了一天。恥辱我不能給出兩個正確的答案... – Nate

如何將CSS樣式僅應用於文本

回答

相關問題