Question

我想知道是否有方法，使用hyphenator.js，只能连接大于容器的单词，但保留所有其他单词的方式。所有其他单词应该突破到下一行（如果它们可以适合容器。）

Hyphenator.config({
  defaultlanguage: 'en'
});
Hyphenator.run();

body {
  font-family: sans-serif;
  font-size: 25px;
  color: #333;
  margin: 50px;
  display: flex;
  width: 800px;
}

div {
  padding: 20px;
  margin: 20px;
  width: 270px;
  background-color: #f0f0f0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Hyphenator/5.3.0/Hyphenator.min.js"></script>
<div class="hyphenate">
  <p><strong>with hyphenator</strong>:</p>
  <p>How can I force hyphens on words that are very long, like this one: "Verylongwordthatshouldbehypenated"?</p>
  <p>But, as long as words will fit the container I don't want Hypenation. So there should be no hyphens here: "Iamalongword Cellardoor Anotherlongword Thisisaprettylongword"</p>
</div>

<div>
  <p><strong>What I would like</strong>:</p>
  <p>How can I force hyphens on words that are very long, like this one: "Verylongwordthat&shy;shouldbehypenated"?</p>
  <p>But, as long as words will fit the container I don't want Hypenation. So there should be no hyphens here: "Iamalongword Cellardoor Anotherlongword Thisisaprettylongword"</p>
</div>

使用连字符我可以打破这样的所有单词：Hyphenator.run();

问题在于它会对不应该连字符的单词进行连字。

这是一支笔来说明问题： https://codepen.io/pwkip/pen/NwxKrr

有什么方法吗？

Answer 1

通过快速浏览the documentation并摆弄您的codepen，您可以通过增加leftmin或minwordlength配置选项或启用useCSS3hyphenation来实现这一目标。

hypernator.js：如何只关注溢出容器的单词？

1 个答案: