html - 如何使用 CSS 来换行而不是用空格换行？

Question

使用以下标记，是否可以(以及如何)实现预览中所示的换行？

标记

<div class="filled-box">
  <h2>Hi there</h2>
  <p>I am just a text with some words, that want to fill the entire space</p>
</div>

CSS

.filled-box {
  width: 80px;
  height: 80px;
  position: absolute;
  overflow: hidden;
}

.filled-box h2,
.filled-box p {
  display: inline;
  overflow-wrap: break-word;
  font-size: 20px;
  margin: 0;
  padding: 0;
}

预览

Hi there I am
just a text w
ith some word
s, that want 
to fill the e
ntire space

如果有解决方案，当然可以使用 CSS3 语法。

Answer 1

word-break: break-all;可能就是您正在寻找的。细节决定成败。

您的初始标记有一个 h2 标记和一个 p 标记，但您的预览显示它们都是内联的。 h2 和 p 标签不是内联元素。

因此，使它们 display: inline 并不是理想的做法，而是使用内联元素，例如 span 等。

这里需要注意的另一件事是 word-break: break-all; 不能在您的内联元素上正常工作。只需使用它们的用途标签，并根据我们的偏好调整值。

.filled-box {
  width: 85px;
  position: absolute;
}

.filled-box p span{
  word-break: break-all;
  font-size: 16px;
  margin: 0;
  padding: 0;
}
.filled-box p {
  word-break: break-all;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

<div class="filled-box">
  
  <p><span>Hi there</span> I am just a text with some words, that want to fill the entire space</p>
</div>