缩放不同长度的文本以适应容器宽度

Question

我有一个具有特定大小的元素，其中包含不同长度的单行或多行文本。 现在我想以这样的方式缩放这些文本的字体大小，使文本的最长行完全适合容器宽度。

例如，我想要这个标记

 .container { width: 400px; border: 1px solid green; padding: .5em; } .container>div { border: 1px dotted gray; }

 <div class="container"> <div>Lorem ipsum dolor sit amet.</div> <div>Lorem ipsum.</div> <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br />sed diam nonumy eirmod tempor invidunt<br />ut labore et dolore magna aliquyam erat, sed diam voluptua.</div> </div>

产生这样的东西：

我尝试使用相对字体大小单位，但最终总是手动调整每个子元素的font-size ，这不是一个选项。

此外， 这篇关于动态缩放文本以适应视口的帖子也无济于事，因为我有多个不同的文本长度。

这可以用CSS解决吗？ 或者我是否必须采用 Javascript 方法来计算字母并相应地调整字体大小？ 但是如果我使用字母大小不同的字体怎么办？

Answer 1

这个怎么样？

 $(document).ready(function() { var divEls = $('.container div'); for(var i=0; i<divEls.length;i++){ var span = $(divEls[i]).find('span'); var fontSize = 16; while (span.width() < $(divEls[i]).width()) { span.css('font-size', fontSize++) } // wrap if span exceeds div width if (span.width() > $(divEls[i]).width()) { span.css('white-space', 'pre-wrap'); } } });

 .container { width: 400px; border: 1px solid green; padding: .5em; } .container>div { border: 1px dotted gray; white-space: pre; }

 <div class="container"> <div><span>Lorem ipsum dolor sit amet.</span></div> <div><span>Lorem ipsum.</span></div> <div><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br />sed diam nonumy eirmod tempor invidunt<br />ut labore et dolore magna aliquyam erat, sed diam voluptua .</span></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

您也可以尝试像CodePen Demo这样的 ES6 解决方案

---

更新- 根据下面的评论，这是一个响应式解决方案（另请参阅此CodePen 演示）：

 function resizeFont() { var divEls = $(".container div"); for (var i = 0; i < divEls.length; i++) { var span = $(divEls[i]).find("span"); var fontSize = (span.css("font-size").match(/\\d+/)[0]); while (span.width() < $(divEls[i]).width()) { span.css("font-size", fontSize++); } while (span.width() > $(divEls[i]).width()) { span.css("font-size", fontSize--); } } } $(document).ready(function() { resizeFont(); $(window).on("resize", resizeFont); });

 body { margin: 0; } .container { max-width: 100vw; border: 1px solid green; padding: .5em; } .container>div { border: 1px dotted gray; white-space: pre; }

 <div class="container"> <div><span>Lorem ipsum dolor sit amet.</span></div> <div><span>Lorem ipsum.</span></div> <div><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br />sed diam nonumy eirmod tempor invidunt<br />ut labore et dolore magna aliquyam erat, sed diam voluptua .</span></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>