html - 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>

我试图分开Someand 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>s 中添加一个带空格的类，以便浏览器知道在哪里拆分单词。

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: "\00200B";}

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

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

p span {
  display: inline;
}

p span.space:after {
    content: "\00200B";
}

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