是否有任何 CSS 标签来证明内容（如文字）？

Question

我希望国内和国际品牌放在上面当前文本的中间。

输出：

CSS代码-

.ans{
    padding-top: 1.2vh;
    display:flex;
    color:lightsalmon;
    font-size: 5vh;
    text-justify: auto;

}

HTML代码-

<div id="qa">
    <p class="q">
        Why HOTPICKS?
    </p>
    <p class="ans">
        HOTPICKS provides a discount of Upto 75% on National and International Brands. 
    </p>
</div>

Answer 1

注意：避免 text-align-last: center; 由于支持度低。 (https://caniuse.com/css-text-align-last)

问题是如何将文本的特定行居中或如何精确换行。如果这很重要，我在研究解决方案时可能会做的是将行包装在带有 display: block 的 span 标记中，但删除此 display: block in low resolutions (using @media queries).

查看下一个片段（没有@media 以查看低分辨率的中断问题）

.ans{
    padding-top: 1.2vh;
    color:lightsalmon;
    font-size: 5vh;
    text-align: center;
}

.ans span {
    display: block;
}

.q {
    text-align: center;
}

<div id="qa">
    <p class="q">
        Why HOTPICKS?
    </p>
    <p class="ans">
        HOTPICKS provides a discount of Upto 75% on 
        <span>National and International Brands.</span>
    </p>
</div>

这行得通，但如果宽度分辨率很小，中断可能会很奇怪，这就是我建议在移动设备上禁用的原因。

这意味着修改 html 但我更喜欢那种使用边距的 superhacky css 怪异技巧。个人喜好问题。

是否有任何 CSS 标签来证明内容（如文字）？

Is there any CSS tag to justify content (like in word)?

javascript

html

css

web