如何將文本換行放在一行中？

我正在做一個應用程序，其中標籤可以添加到帖子，很像stackoverflow的標籤系統。我想顯示所有常用標籤的列表，每個標籤都放在一個完全符合標籤的小盒子中（如<input type="submit">標籤拉伸以適應單詞的大小）。我怎麼能做到這一點，並讓<div>水平對齊它們的包含div的文本包裝？即這樣的事情，其中每個字有<div id="tag">：如何將文本換行放在一行中？

tag1 thisisalongtag 
biology physics 
thiswordwraps science 
one two three four

來源

2012-02-23 theeggman85

最簡單的方法是用display: inline-block樣式標籤的元素，這使得文字環繞，同時防止保證金崩潰。

DEMO

來源

2012-02-23 00:40:06 paislee

+1 - 它還允許你通過設置文本對齊到中心其父內的元素：中心;在父母身上。浮動元素不允許。 – 2012-02-23 00:46:20

這正是我正在尋找的，謝謝！有沒有辦法使用css在所有這些div之間填充？我的標籤上的邊框互相碰撞。 – theeggman85 2012-02-23 00:47:12

使用'margin'將它們分隔開來，就像在DEMO中一樣。 'padding'用於填充元素邊框的內部文本。 – paislee 2012-02-23 00:58:30

我不知道，我完全理解你的問題，但也有不同的方法來實現這個「標籤」的效果。

你可以設置div的浮動：left，clear：left，並給它一個填充（所有邊上5px）。然後把所有的標籤放在一個固定寬度的容器中，他們應該水平放置自己，直到他們沒有空間，然後他們將包裝到下一個「行」。

更簡單的方法是隻使用內聯元素，比如正在本站點上使用的錨標籤（stackoverflow）。這些元素自然水平流動，直到它們跑出房間然後包裹。如果你檢查他們，你會發現他們的風格並不多。而且它們表現出行內元素預期的行爲方式。

有時解決方案比您想象的要簡單。你可能不需要打擾div或浮動。但沒有更多的信息，很難確切地說明什麼會對你有用。

來源

2012-02-23 00:42:44 Judah

display:inline-block

不能在所有的瀏覽器（較老的IE ...包括7）工作

試試這個：

http://jsfiddle.net/mtwDX/

標籤內嵌但空白：NOWRAP ;和正確的行高設置

希望這有助於

來源

2012-02-23 00:53:17

如何將文本換行放在一行中？

回答

相關問題