div中的动态字体大小答案

【问题标题】：Dynamic font size in divdiv中的动态字体大小
【发布时间】：2017-05-13 10:15:21
【问题描述】：

您好，我的字体大小有问题。如果我写的世界太长，我希望字体大小自动缩放（p 元素类 mainPromoText）没有滚动条但它不会发生。
这是我的 HTML 和 CSS 代码：

body {
  background-color: #1a1e22;
}

.firstPageLogin {
  background-color: #32322f;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 15vh;
}

.mainAppName {
  color: #ffffff;
  font-size: 2vw;
  text-align: center;
  padding: 10vh;
}

.mainPromoText {
  color: #ffffff;
  font-size: 10vw;
  text-align: center;
  display: flex;
  flex-direction: column;
}

/*
section {
  position: relative;
  top: 24%;
  text-align: center;
}

.loginCheckbox {
  color: #ffffff;
}
.loginCheckboxText {
  color: #ffffff;
}
*/

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class='container-fluid'>
  <div class="row justify-content-start">
    <div class='col-sm-12'>
      <p class='mainPromoText'>zyciakjgjdfhghjkdhfgkjdghfjdgkfjdlkfjgdkljldkjgkljdfkgljfdklgjdflkdgfjgkld</p>
      <p class='mainAppName'>Apka</p>
    </div>
  </div>
</div>
<div class='container-fluid firstPageLogin col-sm-offset-4 col-sm-4' style='max-width: 80vw;'>
  <div class="row-justify-content-start">
    <div class="col-sm-offset-4 col-sm-4" style='background-color: #ffffff'></div>
  </div>
  <div class="row-justify-content-end">
    <div class="col-sm-offset-4 col-sm-4" style='background-color: #ffffff'></div>
  </div>
</div>

感谢您的帮助

【问题讨论】：

div.mainPromoText 的内容是动态的吗？

标签： html css twitter-bootstrap-3 responsive-design

【解决方案1】：

Fittext.js 可能是一个解决方案：

$(".mainPromoText").fitText();

您可以通过将float 传递给函数来微调效果：

$(".mainPromoText").fitText(1.2);

如果您需要最小或最大font-size:

$(".mainPromoText").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' });

还有一个non-jQuery version：

window.fitText(document.getElementsByClassName("mainPromoText")[0]);

查看http://fittextjs.com/ 以获取演示。

希望这会有所帮助！

【讨论】：