Question

对于一个实例，我有一个看起来像这样的块： 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行或在第三行添加“你”字样。

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

这是：

获取带文字的容器宽度
将文字放入画布并在px
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>

如何检测div中的单个单词

1 个答案:

逻辑：