如何检测div中的单个单词答案

【问题标题】：How to detect single word in a div如何检测div中的单个单词
【发布时间】：2017-07-26 05:11:30
【问题描述】：

例如，我有一个如下所示的块： 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

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

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

这里是：

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

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

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

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

也许我的算法完全错误 - 建议更好的方法来解决这个问题。如果不能帮助我改进我当前的算法。谢谢:)

【问题讨论】：

使用monospaced fonts 会让您的工作更轻松。那么你的计算会简单得多，使用一两个简单的 js 字符串解析函数就可以了。

标签： javascript algorithm canvas text

【解决方案1】：

你可以试试这样的：

逻辑：

克隆 div 并将其文本设置为子字符串，直到最后一个空格。
使用div.offsetHeight比较两个div的高度。
如果高度相同，则多于 1 个字。
如果没有，则最后一行只有 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>

【讨论】：