无论字符数如何，使段落中的所有行都具有相同的宽度答案

【问题标题】：Making all lines in a paragraph the same width regardless character count无论字符数如何，使段落中的所有行都具有相同的宽度
【发布时间】：2015-08-03 18:37:46
【问题描述】：

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

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

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

word-wrap: break-word;

打破那条线以填充容器。

这将成为右侧的示例，而不是左侧的示例。

如果首选 CSS 但也可以使用 JS，这是否可行。

【问题讨论】：

css 不会这样做，你需要 js 为每个单词计算不同的字体大小，以便它适合相同的水平宽度。
这么想，值得看看是否有 CSS 的解决方案。我会继续挖掘。
我在想 1. 分别处理每一行 2. 将每一行放在一个容器中，将整个东西放在一个容器中 3. 比例，以便作为一个行容器需要变得更宽以填充主要容器，高度也增加了。这肯定需要一些 javascript，但主要使用 css 完成。
正在研究解决方案。是否总是每行一个单词？
@VCode 遗憾的是没有，但是它的自动换行打破了单词。我的示例图片非常糟糕，所以我很抱歉。

标签： jquery css user-interface font-size

【解决方案1】：

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

您需要计算最宽的行（使用offsetWidth 来获取每行的宽度），然后为每行计算剩余的宽度，除以该行中的文本长度乘以您的基本字体大小并设置属性。

这是一个有效的fiddle。

【讨论】：

【解决方案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>

【讨论】：

这不起作用。他说文本在一个字段中。
@RobertMcKee 老实说，核心问题是动态字体大小。相比之下，以不同的方式拆分文本是不费吹灰之力的。 StackOverflow 不是一个代码编写服务，它是一个解决问题的社区。span>
真的，如果您要使用 javascript，那么将行分成多个元素与增加字体大小直到换行一样困难。两者都不是很难做到。
@RobertMcKee 除了没有将单词拆分为<span> 的边缘情况的部分，同时找出使文本适合特定空间的最佳方法要困难得多。该库不仅计算字体大小，还计算字间距和字母间距。此处的其他现场答案都没有说明这一点。

【解决方案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');
    }
};

【讨论】：