Jquery

Question

我正在尝试将动态生成的文本放入父 div。问题是文本的长度每天都在变化，有时会溢出父 div。我已经看到很多论坛缩放文本大小，或拉伸内容以填充容器，但是，我使用的内容必须保持设置的字体大小和行高。

我正在寻找一种基于 Jquery 的字距调整方法，我可以在其中设置最大负和正字距调整限制。如果达到限制，但内容仍然不合适，那么最后一句将被删除，紧缩过程将重新开始。这将根据需要重复，直到内容适合父级。

HTML:

<div  class="parent">
    <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae ex eget eros posuere ullamcorper non id magna. Suspendisse augue lorem, ornare ut aliquam eu, molestie nec mauris. In luctus erat sit amet accumsan laoreet. Fusce a dolor in ex efficitur
cursus ac id orci. Integer quis quam molestie elit posuere maximus eget a diam. Proin lacinia pharetra lacus rutrum vestibulum. Etiam id augue mi. Nam efficitur pellentesque varius. Curabitur dui nisi, consectetur eu porttitor nec, sodales sed diam.
Phasellus gravida molestie fermentum. Curabitur non felis sit amet nisi facilisis tincidunt. Suspendisse quis tempus sem.
    </p>
</div>

CSS

.parent {
  width: 250px;
  height: 182px;
  border: 1px solid black;
}

.content {
  font-size: 12px;
  line-height: 14px;
  font-family: Arial, Sans Serif;
  letter-spacing: 0;
  margin: 0
}

如有任何帮助，我们将不胜感激。

Answer 1

试试这个

$(document).ready(function(){
   $('.parent').height($('.content').height());
});

Answer 2

使用 jQuery 这很简单：

创建一个递归函数 ex: kerningText.

在该函数中获取当前 parent height、当前 content height 和当前 content letter-spacing 以检查是否需要减少字母间距（或者如果字母间距停止已达到下限）。

var parentHeight = $('.parent').innerHeight();
var contentHeight = $('.content').innerHeight();
var contentLS = parseFloat($('.content').css('letter-spacing'));

（注意：使用 parseFloat 所以你从 -0.1px 得到 -0.1，否则你不能在第二行代码中做 - 0.1）

如果您的内容高于父级意味着您有溢出并且未达到最低字母间距限制，您需要将 letter-spacing 减少 0.1px:

$('.content').css('letter-spacing', contentLS - 0.1);

然后调用自己并重复该过程，直到适合父级或达到 letter-spacing 限制。

$(document).ready(function() {
  function kerningText() {
    var parentHeight = $('.parent').innerHeight();
    var contentHeight = $('.content').innerHeight();
    var contentLS = parseFloat($('.content').css('letter-spacing'));

    // check if letter-spacing bigger than the lower bound -1
    if (contentHeight > parentHeight && contentLS > -1) {
      //reduce the letter-spacing by 0.1
      $('.content').css('letter-spacing', contentLS - 0.1);
      //recursive until the content fit
      kerningText();
    }
  }

  $('#kerningBtn').on('click', kerningText);
});

.parent {
  width: 250px;
  height: 182px;
  border: 1px solid black;
}

.content {
  font-size: 12px;
  line-height: 14px;
  font-family: Arial, Sans Serif;
  letter-spacing: 0;
  margin: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="kerningBtn">Kerning Text Now</button>

<div class="parent">
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae ex eget eros posuere ullamcorper non id magna. Suspendisse augue lorem, ornare ut aliquam eu, molestie nec mauris. In luctus erat sit amet accumsan laoreet. Fusce a dolor in ex efficitur
    cursus ac id orci. Integer quis quam molestie elit posuere maximus eget a diam. Proin lacinia pharetra lacus rutrum vestibulum. Etiam id augue mi. Nam efficitur pellentesque varius. Curabitur dui nisi, consectetur eu porttitor nec, sodales sed diam.
    Phasellus gravida molestie fermentum. Curabitur non felis sit amet nisi facilisis tincidunt. Suspendisse quis tempus sem.
  </p>
</div>

Jquery - 调整段落文本以适合父级

Jquery - Kerning Paragraph Text to Fit to Parent

html

fonts

kerning

letter-spacing