jquery 动态字母间距100%容器宽度

tyu7yeag 于 2023-08-04 发布在 jQuery

关注(0)|答案(3)|浏览(90)

如何为一行文本创建动态的字母间距，使其从容器宽度的100%开始，并随着屏幕尺寸的减小而减小？我希望根据容器的宽度调整字母间距，并且在调整窗口大小时应重新计算文本的宽度。
我得到的是字母间距，而不是容器的宽度。

$(document).ready(function () {

    function adjustLetterSpacing() {
        var containerWidth = $(".container").width();
        var textElement = $(".dynamic-text");
        var maxWidth = containerWidth - 50;
        var textWidth = textElement.width();
        var letterSpacingValue = 0;

        if (maxWidth > textWidth) {
            var textLength = textElement.text().length;
            letterSpacingValue = (maxWidth - textWidth) / (textLength - 1);
        }

        $(".dynamic-text").css("letter-spacing", Math.max(0, letterSpacingValue) + "px");
    }

    // Initial adjustment on page load
    adjustLetterSpacing();

    $(window).on("resize", adjustLetterSpacing);

});

.container {
  width: 1200px;
  }

.dynamic-text {
    white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="container">
  <p>
      <span class="dynamic-text">
          Lorem ipsum dolor sit amet
      </span>
  </p>
</div>

如能就如何实现这一效果提供任何指导，将不胜感激。

jquery

来源：https://stackoverflow.com/questions/76757190/dynamic-letter-spacing-100-width-of-container

3条答案

按热度按时间

pkmbmrz71#

使用Flexbox的强大功能。你所需要做的就是把每个字符 Package 在一个<span>中。

const s = document.querySelector('.stretch')
const a = Array.from(s.innerHTML)
s.innerHTML = a.map(c => `<span>${c}</span>`).join('');

.stretch {display: flex; justify-content: space-between;}

<p class="stretch">Lorem ipsum dolor sit amet</p>

赞(0）回复(0）举报 2023-08-04

ddhy6vgd2#

我们可以让跨度和div一样宽。并将字母间距指定为width/totalLetters。
但首先我们也要存储字母的实际宽度，因为有些单词也有空格。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
var sizeOfAllLetters = $(".dynamic-text").width();
    function adjustLetterSpacing() {
        var containerWidth = $(".container").width();
        var textElement = $(".dynamic-text");
        var totalLetters = textElement.text().length;
        textElement.width(containerWidth);
        textElement.css("letter-spacing",(containerWidth-sizeOfAllLetters)/totalLetters);
        //console.log(containerWidth/totalLetters)
        }

    // Initial adjustment on page load
    adjustLetterSpacing();
    
    $(window).on("resize", adjustLetterSpacing);
});
</script>

<style>
.container {
  width: 1200px;
  /*margin-inline:auto;*/
  }

.dynamic-text {
    white-space: nowrap;
    /*margin-inline:auto;*/
    background:grey;

}
</style>

</head>
<body>
<div class="container">
  <span class="dynamic-text">Lorem ipsum dolor sit amet</span>
</div>
</body>
</html>

字符串

赞(0）回复(0）举报 2023-08-04

c7rzv4ha3#

你可以用Vanilla JS做这样的事情。
我们在文档中添加一个“hidden/interim”元素，获取它的宽度。

const hiddenEl = document.createElement('span');
  hiddenEl.textContent = text;
  hiddenEl.style.visibility = 'hidden';
  document.body.appendChild(hiddenEl);

字符串
我们可以在第一时间获取并缓存它，如果我们愿意的话。
然后我们只需根据总宽度减去文本原始宽度来计算字母间距。

div.style.letterSpacing = `${(width - absoluteWidth) / text.length}px`;

型

function setLetterSpace(el) {
  const width = el.getBoundingClientRect().width;
  const text = el.textContent.trim();

  const hiddenEl = document.createElement('span');
  hiddenEl.textContent = text;
  hiddenEl.style.visibility = 'hidden';
  document.body.appendChild(hiddenEl);
  const absoluteWidth = hiddenEl.getBoundingClientRect().width;
  document.body.removeChild(hiddenEl)

  div.style.letterSpacing = `${(width - absoluteWidth) / text.length}px`;
}

const div = document.querySelector('div');
setLetterSpace(div);

window.addEventListener('resize', () => {
  setLetterSpace(div);
});

<div>Some text in here</div>

的字符串

赞(0）回复(0）举报 2023-08-04

我来回答

jquery 动态字母间距100%容器宽度

3条答案

相关问题

热门标签

最新问答