使用自动换行剪切单词时如何修复？ CSS

Question

我在下面有一个自动换行的代码，但问题是，它像示例输出一样切断了单词。预期输出，第二个 "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>

顺风cssdocumentation

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

Answer 1

正如您在下面的代码片段中看到的，您要查找的 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>

Answer 2

实际上这些样式工作正常。

我发现如果我点击 space 栏，我的自定义键盘不会 returning " " space。而是导致问题的 return  。

我所做的是将   替换为 space(" ")，它解决了问题。 Replacing   from javascript dom text node

Answer 3

您也可以使用 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>

Answer 4

请使用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>

使用自动换行剪切单词时如何修复？ CSS

How to fix when words are cut using word-wrap? CSS

html

css

tailwind-css