如何将文本换行放在一行中？

我正在做一个应用程序，其中标签可以添加到帖子，很像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

如何将文本换行放在一行中？

回答

相关问题