Question

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

我有一个javascript从一个数组中提取一个单词来填充一行中的第二个单词，具体取决于加载页面的国家/地区的区域 - 但如果sting更长，则换行，有时它不会。

代码就像

<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>

如何配置＆＃34; set-width＆＃34;为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属性居中文本