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

使用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.1获得-0.1px，否则您无法在第二行代码中执行- 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>

Answer 2

试试这个

import React from 'react'
import { connect } from 'react-redux'

const Creator = ({ users, authorKey, label }) => {
  const user = users[authorKey]
  return (
    <div>
      {label}: {user.name}
    </div>
  )
}

const mapStateToProps = (state) => ({
  users: state.entities.users
})

export default connect(mapStateToProps)(Creator)

Jquery - 适合父级的Kerning段落文本

2 个答案: