1

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

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

https://jsfiddle.net/j61xke31/

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
}

对此事的任何帮助表示赞赏。

4

2 回答 2

1

使用 jQuery，这非常简单：

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

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

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

（注意：使用parseFloatso you get -0.1from -0.1px，否则你不能- 0.1在第二行代码中做）

如果您的内容高于父级意味着您有溢出并且未达到最低字母间距限制，则需要减少letter-spacingby 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>

于 2017-05-16T20:44:03.897 回答
0

尝试这个

$(document).ready(function(){
   $('.parent').height($('.content').height());
});
于 2017-05-16T20:21:09.723 回答