缩放不同长度的文本以适合容器宽度 [英] Scale texts of different lengths to fit container width

问题描述

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

I have an element with a certain size, that contains texts of single or multiple lines in different lengths. Now I want to scale the font-size of these texts in such a way, that the longest line of the text fits perfectly into the containers width.

作为一个例子，我想要这个标记

As an example, I want this markup

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

I tried using relative font sizing unit, but always ended up adjusting the font-size of every child element manually, which isn't an option.

这篇文章关于动态缩放文本以适合视口的操作无济于事，因为我有多种不同的文本长度.

Also this post about dynamically scaling text to fit the viewport doesn't help, since I have multiple different text lengths.

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

Can this be solved with CSS? Or do I have to take a Javascript approach where I count the letters and adjust the font-size accordingly? But what if I use a font where letters have different sizes?

推荐答案

如何?

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

您也可以尝试这样的ES6解决方案，例如 CodePen演示

You can also try an ES6 solution like this CodePen Demo

更新-根据下面的评论，这是一种响应性的解决方案(另请参见此 CodePen演示 ):

Update - per the comment below, here is a reponsive solution (also see this 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>

这篇关于缩放不同长度的文本以适合容器宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！