使用纯CSS格式化单词

Question

我有一些数据需要格式化，我想仅通过使用CSS来格式化它。 所以问题是我有以下示例字符串：

  

首页-办公室

预期输出：

  

我想使用CSS格式化这些单词而不插入任何div。像这样的代码可以这样：

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

，输出将类似于上面引用的块引用。但是同样，我有一些通过推送代码生成的随机列表。我不想在这里使用div。有没有一种方法可以使用CSS来分隔它们？我也想隐藏“-”连字符。我已经使用了单词间距，但是再次使用它是硬编码，并且在调整窗口大小时最后一个文本停留在不调整大小的原始位置时也会产生问题。

任何帮助将不胜感激。

Answer 1

text-align: justify-all;（MDN）可能会合理地解决您的问题，但不支持。

AFAIK您需要一个子元素，至少用于隐藏该破折号，然后您也可以使用它来证明这两个单词的正确性。

➡️ Codepen

body {
  max-width: 30rem;
}

p {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0;
  outline: 1px dotted darkred;
}

.case2 > span:first-child {
  display: none;
}

.case3 > span:first-child {
  visibility: hidden;
}

<!-- node texts can be justified but you need some flex items too -->
<p>Home - <span>Office</span></p>

<!-- the 1st span can be hidden -->
<p class="case2">Home <span>-</span> <span>Office</span></p>

<!-- the dash-span can be both hidden and make node texts be justified -->
<p class="case3">Home <span>-</span> Office</p>