通过第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

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

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

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

这个怎么运作：

单词（名称，随便什么，提供您自己的数组）一次都附加到容器元素上。 对于每个新添加的元素，将测量其父元素内的顶部偏移量–如果该位置高于上一个元素，则表示浏览器已将新元素推到下一行，因为空间不足在当前行更多。 在这种情况下，我们将减小字体大小。 （请注意，这里我是通过将当前字体.9以.9 ，否则，字体大小会变得太小而太小。请随意适应您的需求。）

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

带有display:inline-block和100％宽度的after伪元素是一个巧妙的小技巧，它也可以使最后的实际文本行得到对齐； 否则，最后一行的单词将仅左对齐。 （ text-align-last我的喜好， text-align-last到目前为止没有足够的浏览器支持，所以我更喜欢这种解决方案。它在容器元素的末尾引起一个额外的空行–如果不可接受，可以通过以下方法避免也可以通过脚本计算容器元素的正确高度。）

现在，当然，如果您想改组名称，则必须重新运行整个过程。 而且，如果容器元素的宽度发生变化（因此，在某种响应式布局中，您还想为此设置一个调整大小事件处理程序。）

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