始终使用CSS在彼此之间显示跨度

Question

我有这个概念：https://jsfiddle.net/berhqd9a/

首先：如何使foo1和foo2相互显示？我想，display: block应该做什么？

第二：我怎样才能实现长foo而不是忽略div的边界呢？

Answer 1

Updated fiddle

1. @contact可用于将每个范围显示为一个块，或者您可以使用@contact = Contact.new来分隔该行并将元素添加到下一行。

2. display: block会打破长篇文章。

<br>

word-wrap: break-word;

Answer 2

https://jsfiddle.net/IA7medd/berhqd9a/1/

要打破您应该使用final的长文本，并使用word-wrap: break-word;使foo1和foo2相互显示，您也可以display:block使用width:100%

display:inline-block

Answer 3

首先 display: block - 将元素显示为块元素

第二：因为文字没有空间，您需要使用此规则强制文本分开word-break: break-all;或word-wrap: break-word;

<强> CSS

#main {
  border: 1px solid black;
  width: 100px;
}

.wrapper {
  display: inline-block;
}

span {
  display: block;
  word-break: break-all;
}

<强> DEMO

Answer 4

Froxx，

现在你正在

span {
   display: inline-block;
}

而不是

span {
   display: block;
}