按第n行

Question

所以，我有一个名字的JSON提要，我将其放入span元素（可以更改元素或完全删除）。

我的设计要求字体大小随着名称列表的增加而变小，每行一次。所以名称的顶行将是3rem，下一行是2.5rem等。文本将在其容器内对齐。想想星球大战的介绍文字，但字体大小不是透视。

它必须是动态的，因为名字可以随意改变。有没有人知道一个javascript解决方案，可以找到适合第一行的给定字体大小的名称，包装它们并移动到下一行并以较小的尺寸重复？

希望这有点清楚，如果有帮助的话，它是一个有角度的（ng-repeat）构建。

如果我们只有第n行选择器！

布局示例：

Name - Name - Name <=3rem
Name - Name - Name - Name <=2rem
Name - Name - Name - Name - Name <=1rem

但是有道理。

或者想象每个字母都是一个字！

Answer 1

＆＃13;

＆＃13;

// long array of “names” (just lorem ipsum words here)
var names = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.'.split(' ');

var container = $('#container'),
    offsetTop = newOffsetTop = 0,
    fontSize = 3;

for(var i=0, l=names.length; i<l; ++i) {
    var span = $('<span/>').text(names[i]+' ');
    container.append(span);
    newOffsetTop = span.position().top;
    if(newOffsetTop > offsetTop) {
        fontSize *= .9;
    }
    span.css('font-size', fontSize+'rem');
    offsetTop = newOffsetTop;
}

＆＃13;

#container {
    position:relative;
    background:#ccc;
    text-align:justify;
}
#container:after {
    content:'';
    display:inline-block;
    width:100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container"></div>

＆＃13;

＆＃13;

＆＃13;

工作原理：

单词（名称，等等 - 提供您自己的数组）一次一个地附加到容器元素。对于每个新添加的元素，测量其在父元素中的顶部偏移量 - 如果它高于前一个元素的那个，则表示浏览器已将新元素推送到下一行，因为没有足够的空间更多关于当前的路线。在这种情况下，我们减少字体大小。 （请注意，我已经通过将当前字体大小乘以.9因子来完成此操作，否则尺寸会变得太快。请随意适应您的需求。）

也会在其跨度内的每个单词中添加一个空格 - 否则我们只会得到一个长行的文本，它不会自动中断。 （而且我们不能在这里漂浮，因为我们希望它们合理。）

具有display:inline-block和宽度为100％的after伪元素是一个非常小的技巧，可以使最后一行文本也被证明是合理的;没有它，最后一行上的单词就会左对齐。 （text-align-last目前根据我的口味没有足够的浏览器支持，所以我更喜欢这个解决方案。它会在容器元素的末尾产生额外的空行 - 如果这是不可接受的，可以通过通过脚本计算容器元素的正确高度。）

现在当然如果你想要改名，你必须再次运行这一切。而且，如果容器元素的宽度发生变化（因此在某种响应式布局中，您需要为此设置一个resize事件处理程序。）

（也作为小提琴：http://jsfiddle.net/ubnugdtv/1/）