无论字符数为

Question

我正在为客户网站制作GUI。它是一个T恤网站，他们想要一个非常简单的设计师，有限的选择。

这很好，但是他们要求的一个选项是轻松地使所有线条具有相同的宽度。这导致某些行的字体更大。

提供的文本位于一个文本字段中，然后我使用：

word-wrap: break-word;

打破该行以填充容器。

这最终将作为右侧的示例，而不是左侧的示例。

这可能是CSS首选，但JS也可以使用。

Answer 1

如果你不介意将每一行分成自己的容器（span或任何其他...），你可以用javascript来完成。关键是font-size CSS属性。

你需要计算最宽的线（使用offsetWidth来获得每条线的宽度），然后计算每条线留下多少备用宽度，除以线中文本的长度乘以你的基线字体大小并设置属性。

这是一个有效的fiddle。

Answer 2

BigText jQuery plugin能够完全按照您的意愿行事。

$('#bigtext').bigtext();

#bigtext{
  width:300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://zachleat.github.io/BigText/dist/bigtext.js"></script>
<div id="bigtext">
  <span>SOME</span>
  <span>TOTALLY</span>
  <span>HIPSTER</span>
  <span>QUOTE</span>
  <span>ABOUT</span>
  <span>LIFE</span>
</div>

Answer 3

您可以增加字体大小，直到文本比父级更宽。看看这个递归函数（使用jQuery）：

function findLargestFontSize($line){
    var oldSize = parseInt($line.css('font-size'));
    //set new size
    $line.css('font-size', oldSize + 1 + 'px');
    // check if hit the edges
    if( $line.width() > $line.parent().width() ){
        $line.css('font-size', oldSize + 'px');
        return(oldSize);
    } else {
        findLargestFontSize($line);
    }
}

a fiddle with an example。

修改

我发现Amit的答案比这更优雅，所以我合并了我的解决方案。 Here is another fiddle

var $target = $('#target');
var words = $target.text().split(' ');

// split words into lines
$target.empty();  
for(var i = 0; i < words.length; i++){
    var $newLine = $('<span style="display: table;">' + words[i] + '</span>');
    $target.append($newLine);
    if($newLine.width() < $target.width()) {
        $newLine.css('font-size', parseInt( $newLine.css('font-size'))  * ( $target.width() / $newLine.width()) + 'px');
    }
};