html - 如何在 css 中为文本设置特定像素或字符宽度限制

Question

我正在尝试在 html 行中设置一组特定的字符或像素宽度限制。

我有 javascript 从数组中提取一个词来填充一行中的第二个词，具体取决于页面加载所在国家/地区的区域 - 但如果字符串较长，则该行会换行，有时它不会.

代码是这样的

<p> Hello <span class="set-width"> $WORD-FROM-JS </span>, how are you ? </p>

例子

<p> Hello <span class="set-width"> Germany</span>, how are you ? </p>

如何将“set-width”配置为 100px 或 10 个字符，以便文本的长度相同 - 就像；

Hello Germany, How are you ?
Hello   USA  , How are you ?
Hello  India , How are you ?
Hello  Korea , How are you ?
Hello Afghans, How are you ?

谢谢

Answer 1

您可以通过为 set-width 类提供以下属性来做到这一点:

display: inline-block;
width: 100px;
text-align: center;

上述属性的组合将使浏览器威胁元素作为一个盒子，它像按钮或图像一样与文本一起流动，然后浏览器将使其精确到 100px 大，并使用 text-align 属性使文本居中.