css - 行内の 2 つのスパンでテキストを折り返す

Question

div に 2 つのスパンがあります

<div>
  <span class="span1">  text 1 text1 <span>
  <span class="span2"> text2 is a long text text2 is a long text text2 is a long text <span>
<div>

ここで、span2 のテキストを、span1 自体ではなく、span2 が始まる場所から折り返す必要があります。

だからこんなはずじゃない

   text1 text1 text2 is a long text 
   text2 is a long text text2 is a long text 

なりたい

   text1 text2 is a long text 
   text1 text2 is a long text text2 is a long text 

どうすればこれを達成できますか。プロパティ display:block を使用してスパンを試してみましたが、IE では動作しないようです。

また、両方のスパンの背景色を同じ高さにしたいので、2 つの別々の div を使用したくありません。

ありがとう、

Answer 1

OPが伝えようとしているのは、単に各スパンを新しい行にレンダリングしたいということだと思います。私が正しければ、次のように動作します。

spanとdivタグを閉じます。

<div>
    <span class="span1">span 1 content </span>
    <span class="span2">span 2 content</span>
</div>

それらのスパンを作るdisplay:block

.span1, .span2 {display:block;} 

http://jsfiddle.net/waMM2/

---

FWIW スパンに異なるクラス名を付ける必要がない限り、同じ名前を付けたほうがよいでしょう。例えば：

<div>
    <span class="block">span 1 content </span>
    <span class="block">span 2 content</span>
</div>

CSS:.block {display:block;}

または、特定の div のすべての子スパンをターゲットにすることが適切な場合があります。

<div class="blockspans">
    <span>span 1 content</span>
    <span>span 2 content</span>
</div>

CSS:.blockspans span {display:block;}