用左右對齊文字換行

Question

我有一些文字在同一行上左右對齊，問題在於有時候文字不能在一行上合適因此必須換行到2行。這很好，但它包裹的方式並不理想。如果它不適合單行，我想左文本換行和右文本保持原樣。

下面是一些例子HTML：

<p class="statute_name">Alkali etc Works Regulation Act 1906 <span class="float_right">4.22</span></p> 

<p class="statute_name">Ancient Monuments and Arch­aeological Areas Act 1979 <span class="float_right">2.33, 5.78, 12.86</span></p> 

<p class="statute_name">Historic Environment (Amendment) (Scotland) Act 2011 <span class="float_right">12.6, 12.35, 12.86 </span></p> 

和CSS：

.statute_name { 
    margin-left: 2em; 
    text-indent: -2em; 
    clear: both; 
    text-align: left; 
} 

.float_right { 
    float: right; 
    text-align: right; 
} 

而且一個的jsfiddle：http://jsfiddle.net/Z35au/

如果調整結果窗口的寬度，你可以看到，兩邊會重疊，然後右邊會移動到左邊下方，最後左邊必須包裹，這就是我希望它看起來如何，但跳過那種行爲之前加入（重疊，右側移動到下方）。

我經歷過一些不同的左和右對齊技術，如兩面都不同p元素和浮動他們無論哪種方式，在希望這將迫使左側施加width到權部分當它命中時包裝，但它不以我想要的方式工作。

Answer 1

嗨我剛剛弄亂了代碼，我發現要做到這一點的最佳方式是將CSS包裝在一個div中，然後給這個500px的最小寬度。這樣可以保持兩段文本之間的慷慨距離，並且可以防止文本重疊。

HTML

<div class="text"> 
    <p class="statute_name">Alkali etc Works Regulation Act 1906 <span class="float_right">4.22</span></p> 

    <p class="statute_name">Ancient Monuments and Arch­aeological Areas Act 1979 <span class="float_right">2.33, 5.78, 12.86</span></p> 

    <p class="statute_name">Historic Environment (Amendment) (Scotland) Act 2011 <span class="float_right">12.6, 12.35, 12.86 </span></p> 
</div> 

CSS

.statute_name { 
    margin-left: 2em; 
    text-indent: -2em; 
    clear: both; 
    text-align: left; 
} 

.float_right { 
    float: right; 
    text-align: right; 
} 

.text{ 
    min-width:500px; 
}