使用自动换行剪切单词时如何解决？ CSS答案

【问题标题】：How to fix when words are cut using word-wrap? CSS使用自动换行剪切单词时如何解决？ CSS
【发布时间】：2021-10-12 19:46:36
【问题描述】：

我在下面有一个代码可以自动换行，但问题是，它会像示例输出一样切断单词。预期的输出，第二个“head”应该在下一行而不是剪切。

这里是代码。

<div className="relative mt-px-14 mx-px-8 p-px-25">
  <div className="relative">
        <div className="absolute w-full text-20 whitespace-pre-line break-words">
          Head shoulder knees and toes head
        </div>
        .... more codes here
  </div>
</div>

顺风 css documentation

> break-all ==> word-break: break-all;
> whitespace-pre-line   ===>  white-space: pre-line;

【问题讨论】：

尝试使用white-space: nowrap;
尝试使用“break-words”类
我尝试了你所有的建议，但没有奏效。
你能创建一个最小的、可重现的例子吗？ stackoverflow.com/help/minimal-reproducible-example
您可以使用play.tailwindcss.com 共享代码，以便我们更好地了解正在发生的事情。

标签： html css tailwind-css

【解决方案1】：

您也可以使用CSS hyphens 属性。

这是一个快速演示：

article {
  max-width: 500px;
  margin: 0 auto;
  width: 100%;
  text-align: justify;
}

article p {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

<article lang="en">
  <p>As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
  <p>For example, if you are designing a brand new website for someone, most times you will have to make sure the prototype looks finished by inserting text or photos or what have you. The purpose of this is so the person viewing the prototype has a chance to actually feel and understand the idea behind what you have created.</p>
</article>

【讨论】：

【解决方案2】：

请使用overflow-wrap: break-word;

article {
  max-width: 500px;
  margin: 0 auto;
  width: 100%;
  text-align: justify;
}

article p {
  overflow-wrap: break-word;
}

<article lang="en">
  <p>As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
  <p>For example, if you are designing a brand new website for someone, most times you will have to make sure the prototype looks finished by inserting text or photos or what have you. The purpose of this is so the person viewing the prototype has a chance to actually feel and understand the idea behind what you have created.</p>
</article>

【讨论】：

【解决方案3】：

实际上样式工作正常。

我发现如果我点击空格键，我的自定义键盘不会返回 " " 空格。而是返回导致问题的&nbsp;。

我所做的是将&nbsp; 替换为空格（“”），它解决了问题。 Replacing   from javascript dom text node

【讨论】：

【解决方案4】：

正如您在下面的 sn-p 中看到的，您要查找的 word-break 的值是 break-word，而不是 break-all。

根据link，

break-all   To prevent overflow, word may be broken at any character
break-word  To prevent overflow, word may be broken at arbitrary points

.one {
  word-break: break-all;
  white-space: pre-line;
}

.two {
  margin-top: 20px;
  white-space: pre-line;
  word-break: break-word;
}

<div class="one">
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus deserunt consectetur iste obcaecati nam placeat adipisci beatae explicabo dolorem cum magnam a officiis nihil repudiandae eligendi, tempore ducimus maxime veniam.
</div>

<div class='two'>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus deserunt consectetur iste obcaecati nam placeat adipisci beatae explicabo dolorem cum magnam a officiis nihil repudiandae eligendi, tempore ducimus maxime veniam.
</div>

【讨论】：