CSS

Question

我有一个段落，每个字母都在其他元素中。例如：

<p>
    <span>S</span>
    <span>o</span>
    <span>m</span>
    <span>e</span>
    <span>&nbsp;</span>
    <span>t</span>
    <span>e</span>
    <span>x</span>
    <span>t</span>
</p>

我正在尝试将 Some 和 text 分开，但我看到了：

p {
border: 1px solid black;
width: 195px;
height: 200px;

}

<p>
    <span>S</span><span>o</span><span>m</span><span>e</span><span>&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span>&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span>&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span>&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span>&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span>&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span>&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span>&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span>&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span>&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span>&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span>&nbsp;</span>
</p>

我怎样才能得到这样的东西

p {
border: 1px solid black;
width: 195px;
height: 200px;

}

<p>
     Some text Some text Some text Some text Some text Some text  
</p>

如何打断本段文字以及如何添加text-align: justify效果？感谢您的帮助。

Answer 1

您可以使用以下字符拆分：

p span {display:inline-block;}

p {
  border: 1px solid black;
  width: 195px;
  height: 200px;
}

p span {
    display: inline-block;
}

<p>
    <span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span>&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span>
</p>

否则，我认为您必须在 <span> 和 space 中添加一个 class，以便浏览器可以知道在哪里拆分单词。

p {
  border: 1px solid black;
  width: 195px;
  height: 200px;
}

p span {
  display: inline;
}
  
p span.space {
  display: inline-block;
  word-break: break-all;
}

<p>
    <span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span>&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span>
</p>

编辑： 我刚刚意识到这不允许证明文本的合理性。相反，您可以使用：

p span.space:after {content: "[=15=]200B";}

唯一的问题是该行的最后一个 space 仍然有宽度。

p {
  border: 1px solid black;
  width: 195px;
  height: 200px;
  text-align: justify;
}

p span {
  display: inline;
}

p span.space:after {
    content: "[=16=]200B";
}

<p>
    <span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span>&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span>
</p>

CSS - 每个字母在其他元素中的段落中的分词

CSS - word-break in paragraph which each letter is in other element

html

word-break