时间戳

首页 > 解决方案 > 使用自动换行剪切单词时如何解决？CSS

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

问题描述

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

在此处输入图像描述

这是代码。

<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文档

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

标签： htmlcsstailwind-css

解决方案

正如您在下面的代码段中看到的那样，word-break您正在寻找的值是break-word，而不是break-all。

根据链接，

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>

推荐阅读