如何使设置文本大小填充容器

Question

我希望通过在单词之间放置尽可能多的空格来制作带有设置文本大小的文本填充容器，以使第一个和最后一个单词接触到结尾。

示例：如果有三个单词/项目，则最左边的第一个单词，中间的第二个单词和最右边的第三个单词。

我想用css做这个，但我不介意javascript / jquery。

Answer 1

使用一些JavaScript，以便您可以将其与IE7 http://jsfiddle.net/NTx2A/

一起使用

Answer 2

<div class="line trio">
    <div class="unit left">One</div>
    <div class="unit mid">Two</div>
    <div class="unit right">Three</div>
</div>
<div class="line quartet">
    <div class="unit left">One</div>
    <div class="unit mid">Two</div>
    <div class="unit mid">Three</div>
    <div class="unit right">Four</div>
</div>
<div class="line duet">
    <div class="unit left">One</div>
    <div class="unit right">Two</div>
</div>

---

.line {display: table; width: 100%;}
.unit {display: table-cell;}

.duet    .unit {width: 50%;}
.trio    .unit {width: 33.3%;}
.quartet .unit {width: 25%;}

.left  {text-align: left;}
.mid   {text-align: center;}
.right {text-align: right;}

Answer 3

表格在这里工作得很好。

<table width="400" border="1">
<tr>
    <td style="text-align:left">one</td>
    <td style="text-align:center">two</td>
    <td style="text-align:center">three</td>
    <td style="text-align:center">four</td>
    <td style="text-align:right">five</td>
</tr>
</table>

无需使用CSS或JS技巧，它全部是自动的。