javascript - 如何检测div中的单个单词

Question

举个例子，我有一个看起来像这样的 block : https://jsfiddle.net/9varxzff/

HTML:

<div class="container">Hello! this is my new space where i can show you something</div>

CSS:

.container {
  width: 200px;
  font-family: Roboto;
}

输出:https://www.screencast.com/t/KyqNeWRT

在这里你可以看到，“something”这个词通常转移到一个新行。我需要增加或减少 div 中所有文本的字体大小，以便删除这个单词，例如排成两行或在第三行添加单词“you”。

我已经找到了这个问题的解决方案，但是我的算法出了点问题，我无法预测它的行为。

这里是:

1. 获取文本容器的宽度
2. 将文本放置到 Canvas 上并获取其宽度(以像素为单位)
3. text_width/container_width = 行数(例如 2.85 代表 2 整行和第四行的 85%)
4. 如果不完整的行少于整行的 30%，则增大或减小字体大小

我认为问题出在第三点，因为有时我有 1.87 行，但实际上我有 3 行，第三行有一个单词。

这是我的代码，打开控制台以获取有关当前进程的更多信息

https://jsfiddle.net/9varxzff/6/

也许我的算法根本就错了——建议更好的方法来解决这个问题。如果不能帮助我改进我当前的算法。谢谢 :)

Answer 1

你可以尝试这样的事情:

逻辑:

• 克隆 div 并将其文本设置为子字符串直到最后一个空格。
• 使用 div.offsetHeight 比较两个 div 的高度。
• 如果高度相同，则多于1个词。
• 如果不是，最后一行只有一个词。

您可以使用以下 JSFiddle测试/调试代码。

function hasTrailingWord(selector) {
  var div = document.querySelector(selector);
  var clone = div.cloneNode(false);
  var index = div.textContent.lastIndexOf(" ")

  clone.classList.add('hide')
  clone.textContent = div.textContent.substring(0, index);
  document.body.append(clone)

  var h1 = div.offsetHeight;
  var h2 = clone.offsetHeight;
  
  console.log(h1, h2)
  clone.remove()
  return h1 !== h2;
}

console.log(hasTrailingWord(".container"))
console.log(hasTrailingWord(".container1"))

[class^=container] {
  width: 200px;
}

.hide {
  visibility: hidden;
}

<div class="container">Hello! this is my new space where i can show you something</div>

<br/>

<div class="container1">Hello! this is my new space where i can show you something for you to test</div>