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

我期望通过在文字之间放置尽可能多的空间以使第一个和最后一个单词接触末端来设置文本大小的文本。如何使设置的文本大小填充容器

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

enter image description here

我想做到这一点使用CSS，但我不介意使用Javascript/jQuery的。

来源

2012-02-04 Ayub

完美的用于'table'，imho的用例。将它设置为跨越'100％'宽度，然后相应地将它们的'td'中的单词对齐：第1个对齐左边，第2个到第（n-1）个对齐中心，第n个对齐右边。 – aefxx 2012-02-04 00:50:18

@aefxx：请参阅下面的答案。虽然我同意一个表格式的演示文稿对于这种情况是最好的，但是我不推荐使用'table'元素，因为它仅用于**表格**数据。语义也很重要。 – chharvey 2012-02-04 00:55:05

我正在使用这个在HTML5中的链接，看起来是语义 - 我不想使用表。 javascript示例看起来很有前途。 – Ayub 2012-02-04 01:01:12

使用一些JavaScript这样你就可以与IE7 http://jsfiddle.net/NTx2A/使用

来源

2012-02-04 00:52:15 asawilliams

+1完美，不太“仅限CSS”，但仍然... – aefxx 2012-02-04 01:01:28

这是一个很好的方法。非常普遍和防呆...除非你的访问者在他们的浏览器上禁用JS。我不确定使用['ul's]（http://www.w3.org/TR/html5/grouping-content.html#the-ul-element）进行布局，但是...我想这不是在技术上是错误的，但它让我感到奇怪。 – chharvey 2012-02-04 01:28:57

这与我的表格示例完全相同。是JS代码实时执行...？如果是这样，那么我一定会使用表，即使它们不是语义上正确的，但至少会减少CPU使用率。 – Rookie 2012-02-04 12:52:03

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

来源

2012-02-04 00:50:11 chharvey

可行，但如果下周碰巧有5个词，一个月有7个词等等，我认为你明白了。你将不得不硬编码每个可能的组合。 – aefxx 2012-02-04 01:03:16

的确如此......但对于任何纯CSS解决方案来说都是如此。对于** true **泛化，您需要使用JavaScript。通过这种方法，你可以保留一个外部样式表，如[this]（https://github.com/stubbornella/oocss/blob/master/core/grid/grids.css）或[this]（http：// chharvey。 net16.net/core/CSS/grid.css）。 – chharvey 2012-02-04 01:13:31

表工作得很好这里。

<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技巧，它的全部自动化。 enter image description here

来源

2012-02-04 00:59:27 Rookie

尽管我同意一个表格式的演示文稿对这种情况最好，但我不会推荐使用'table'元素，因为这仅用于**表格**数据。看到我的答案。 – chharvey 2012-02-04 01:22:11

另外，尝试从演示文稿中分离内容。也就是说，内联样式不是很好的做法。它们快速而肮脏，非常适合调试，但不是坚持使用的好方法。 – chharvey 2012-02-04 01:23:27

@ TestSubject528491，我添加了样式属性，以使它在这里变得紧凑。我不喜欢你的版本，因为它需要每个元素的百分比。 – Rookie 2012-02-04 12:46:07

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

回答

相关问题