两端对齐文本中正常宽度空格的跨度

Posted 2023-03-17

【中文标题】两端对齐文本中正常宽度空格的跨度

【英文标题】：Spans of Normal-Width Spaces Within a Justified Text

【发布时间】：2021-11-15 13:11:06

【问题描述】：

这是我的情况：我有一个容器元素，其中的所有文本都必须对齐。但是，容器中的一些内联元素 ——文本中的某些重要短语——必须有常规大小、不对齐的空格。 这是一个例子：

<div style="text-align: justified;" >
<!-- A list of tags, let's say -->
sauna farming apples towels car(non-justified space)lifting
carpet(non-justified space)stealing football owls
</div>

<div style="text-align: justified;">
  sauna farming apples towels car lifting carpet stealing football owls
</div>

什么是最有效的解决方案？我的第一次尝试是使用  实体，没有意识到他们遵循相同的理由规则。据我所知，在这种情况下，没有一个 unicode 字符或 html 实体具有与常规空格相同的大小，可以用作空格字符。将它们包装在一个跨度标签中，并带有一些 CSS 样式是最佳实践吗？如果是这样，什么风格会阻止理由？我应该完全按照不同的方法组织文本，以达到相同的效果吗？

【问题讨论】：

请创建一个 sn-p 以进行澄清。

@AmanSharma 我已编辑问题以提供示例

Just display:inline-block 似乎工作得很好；尽管那时您必须忍受这些元素不会再从一行中断到下一行。但看起来您希望将它用于开头属于一起的单词组合，所以这可能没问题。

【参考方案1】：

在测试了@cbroe 提供的解决方案后，我认为它可以满足我的需求。澄清一下：用display: inline-block; 将短语包装在一个跨度标签中可以防止跨度内的空间增长。这也可以防止短语中断，但是，这是可取的，所以我没有努力改变这种行为。 一个例子：

<style>
div
    text-align: justify;
    text-align-last: right; /* not part of the solution, just aesthetic */

span
    display: inline-block;

</style>
<div><!-- A list of tags -->
bees quaternion consternation wimbeldon belladonna <span>salted caramel</span> nice
<span>waste management</span> <span>carpet deodorizer</span> telephony artifact equation
<span>rose garden</span>
</div>