應用填充到行尾HTML CSS

的我的問題是，我希望把這樣的事情應用填充到行尾HTML CSS

<span>CONSEQUAT, VEL ILLUM DOLORE EU FEUGIAT NULLA FACILISIS AT VERO EROS ET ACCUMSAN ET IUSTO ODIO DIGNISSIM QUI BLANDIT PRAESENT LUPTATUM ZZRIL DELENIT AUGUE DUIS DOLORE TE FEUGAIT NULLA FACILISI.</span>

與CSS這樣

span { 
    font-size: 25px; 
    line-height: 28px; 
    color: white; 
    background-color: #2EC6C6; 
    padding-right: 5px; 
    padding-left: 5px; 
}

的百分比大小DIV。當換行符時，我希望每行都有應用的填充符左右。目前它只在整個句子的開頭和結尾處應用。

我知道我可以把每一行放在單獨的span中，但是我希望它是動態的，所以我可以寫很多行並且它會適用。

有什麼建議嗎？寧願純粹的CSS，但願意轉移到JavaScript。

這裏是一個Fiddle

來源

2013-08-02 Sjrsmile

相關：HTTP：//計算器。 com/questions/7215011/ – xec

我想段落會更適合你的情況。 –

使用text-align：justify; css屬性，而不是 –

從here：

顯示：內聯塊

內聯塊被置於內聯（即，在同一行的相鄰的內容），但是它表現爲一個塊。

span { 
    font-size: 25px; 
    line-height: 28px; 
    color: white; 
    background-color: #2EC6C6; 
    padding-right: 5px; 
    padding-left: 5px; 
    display: inline-block 
}

http://jsfiddle.net/DsqY2/

enter image description here source

來源

2013-08-02 13:18:24

我正在尋找突出顯示只比每行長5px，但整個塊是該顏色。 – Sjrsmile

雖然這在技術上可以解答，但可以通過添加關於爲什麼更改有效的解釋來改善此答案。 – Shauna

@Shauna，我同意，更新。 –

試試這個

請寫信display:inline-block;在span類

http://jsfiddle.net/DsqY2/3/

span { 
    font-size: 25px; 
    line-height: 28px; 
    color: white; 
    background-color: #2EC6C6; 
    padding-right: 5px; 
    padding-left: 5px; 
    display:inline-block; /*-add--*/ 
}

來源

2013-08-02 13:19:26 falguni

-1

好，它的工作原理，如果你有<div>代替<span>做到這一點，看到here。

來源

2013-08-02 13:20:42 cars10m

好的，我接受downvote，但是這提示我下一個問題：在'div'上使用'inline-block-span'有什麼好處？無可否認，它將爲您節省編輯您的HTML文本。但是他們會在頁面上「浮動」或行爲不同嗎？ – cars10m

剛剛爲自己工作：如果沒有'width'屬性，它們或多或少表現相同，但帶有* width屬性的span將確實在一行文本中浮動。 – cars10m

你可以嘗試使用箱裝飾斷：爲WebKit的/ Firefox和空白克隆：預包裝的即

header { 
 
    position: relative; 
 
    margin: 10px; 
 
    width: 300px; 
 
} 
 
header:before { 
 
    content: ''; 
 
    position: absolute; 
 
    height: 100%; 
 
    right: 100%; 
 
    width: 12px; 
 
    background: gray; 
 
    background: rgba(0,0,0,.3); 
 
} 
 

 
h1 { 
 
    display: inline; 
 
    padding: 8px 12px 8px 0; 
 
    font-size: 30px; 
 
    line-height: 49px; 
 
    background: rgba(0,0,0,.3); 
 
    -webkit-box-decoration-break: clone; 
 
    box-decoration-break: clone; 
 
} 
 

 
/* add browser-class to html with modernizr or js */ 
 
.ie h1 { 
 
    white-space: pre-wrap; 
 
} 
 
.ff h1 { 
 
    padding: 7px 12px 7px 0; 
 
}

<header> 
 
    <h1>Lorem ipsum dolor, sit amet consectetuer</h1> 
 
</header>

來源

2014-10-31 14:34:49 tibalt

應用填充到行尾HTML CSS

回答

相關問題