Html 使用纯css格式化单词

我有一些需要格式化的数据，我想只使用css格式化，不使用javascript。 所以问题是我有这个示例字符串：

内政部

预期产出：

我想在不插入任何div的情况下使用css格式化这些单词。就像代码可以这样：

someData.push(`${origin.code} - ${destination.code}`); // code coming from the store file
<div>{value}</div> //prints the above code value here and this is from the js file

someData.push（`${origin.code}-${destination.code}`）；//来自存储文件的代码
{value}//在这里打印上面的代码值，这是来自js文件的

输出将与blockquote中提到的一样。但我还是通过推码生成了一些随机列表。我不想在这里使用div。有没有一种方法可以使用css将它们隔开？我还想隐藏“-”连字符。我已经使用了单词间距，但它又是硬代码，而且在调整窗口大小时也会产生问题，因为最后一个文本保持在原始位置，而不会调整大小

任何帮助都将不胜感激

（MDN）可能会通过正当性解决您的问题，但它不受支持

好吧，你至少需要一个子元素来隐藏破折号，然后你也可以用它来证明这两个词的正确性

➡️

正文{
最大宽度：30雷姆；
}
p{
显示器：flex；
证明内容：之间的空间；
填充：1rem0；
轮廓：1px点黑色；
}
.案例2>跨度：第一个孩子{
显示：无；
}
.案例3>跨度：第一个孩子{
可见性：隐藏；
}

内政部

家庭办公室
家庭办公室

除了一些特殊情况（：第一个字母，：第一行，…）之外，您不能单独使用CSS格式化“部分文本”，只能针对元素。在这种特殊的情况下，你可以证明文本能得到这两个词的所需的左/右对齐，但是中间的短线仍然显示，几乎没有任何方式绕过（除了试图用一些绝对定位的元素来覆盖它，大致在那个区域的中间或某物）。你很可能需要先修改结构。谢谢大家…我已经解决了这个问题。我不得不使用javascript。我必须拆分JS文件中的值，然后将其分配给一个变量，并使用该变量打印值，如下所示：

let valueSplit=value.split（/-（.+）/）；{valueSplit[0]}{valueSplit[1]}

它成功了。我只是想知道，如果我们能通过css做到这一点。。。。