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

Question

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

举个例子，我想要这个标记

＆＃13;

＆＃13;

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

.container>div {
  border: 1px dotted gray;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

产生这样的东西：

我尝试使用relative font sizing unit，但总是手动调整每个子元素的font-size，这不是一个选项。

另外this post关于动态缩放文本以适合视口也没有帮助，因为我有多个不同的文本长度。

这可以用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 Demo ）：

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>