如何设置文本以水平填充 div？答案

【问题标题】：How can I set text to fill a div horizontally?如何设置文本以水平填充 div？
【发布时间】：2013-05-31 08:27:42
【问题描述】：

假设我有一个指定宽度为 200 像素的 div。然后我在那个 div 中有 3 个 h1 元素，它们具有不同数量的字母/不同的宽度。如何水平拉伸它们以填充 div？

 <div id="Header">
     <div class="Logo"><h1>CORROBORREE</h1><br><h1>FROG</h1><br><h1>PROJECT</h1></div>

我需要的是相同宽度的单词---包含 div 的宽度。

我在 h1 上尝试了 text-align justify 但这没有任何好处。

.Logo { 
margin-left: 100px; 
height:auto; 
width:  250px;  
background-color:#666; 
font-family: Impact, Charcoal, sans-serif; 
text-align: justify; 
}

.Logo h1 {    
font-size: 40;
text-align:justify;
display: inline;     
}

【问题讨论】：

其他人要求类似的东西。看这里：[stackoverflow.com/questions/4355009/…[1]：stackoverflow.com/questions/4355009/…
这也可能有帮助：stackoverflow.com/questions/5976289/…

标签： html css

【解决方案1】：

我认为目前还没有纯粹的 CSS 方式来实现（我的意思是使用一些直接的 CSS 方式，你需要左右兼顾），你可以做的是在 CSS 中使用 nth-of-type 并给出 @ 987654323@ 到每个.. 这样你就不必为每个h1 声明类，而且你会得到拉伸文本

Demo

<div class="Logo">
    <h1>CORROBORREE</h1>
    <br />
    <h1>FROG</h1>
        <br />
    <h1>PROJECT</h1>
</div>

html, body {         /* Using this or not depends on you, 
                        nothing to do with the example */
    width: 100%;
    height: 100%;
}

.Logo {
    background: #f00;
    width: 300px;
}

.Logo h1:nth-of-type(1) {
    letter-spacing: 4px;
}

.Logo h1:nth-of-type(2) {
    letter-spacing: 70px;
}

.Logo h1:nth-of-type(3) {
    letter-spacing: 25px;
}

你为什么要这样做，我不知道，因为这看起来很奇怪

【讨论】：

【解决方案2】：

使用letter-spacing

例如：letter-spacing:20px

【讨论】：

【解决方案3】：

看看这个：

Demo

CSS：

#Header{
  width:200px;
  height:200px;
  background-color:grey;
  overflow:hidden;
}
#h1{
  -webkit-transform:scaleX(0.78);
  margin:0 0 0 -25px;
}
#h2{
-webkit-transform:scaleX(2.3);
  margin:0 0 0 70px;

}

#h3{
-webkit-transform:scaleX(1.3);
  margin:0 0 0 25px;

}

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="Header">
    <div class="Logo"><h1 id='h1'>CORROBORREE</h1><br><h1 id='h2'>FROG</h1><br><h1   id='h3'>PROJECT</h1></div></div>
</body>
</html>

【讨论】：

【解决方案4】：

文本对齐：对齐和显示：块。而且一页只能有一个h1-tag

【讨论】：

其实html5鼓励使用多个h1标签
错在多个层次上...justify 仅适用于单词之间的空格，而不适用于连接的字母，并且不适用于单行内容。当然，一个文档可以有多个h1（这有多大意义是一个不同的问题，取决于您尝试构建的内容结构）。