用左右对齐文字换行

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; 
}