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

Posted 2023-03-06

【中文标题】如何为css中的文本设置特定的像素或字符宽度限制

【英文标题】：how to set a specific pixel or character width limit for a text in css

【发布时间】：2016-04-04 17:38:46

【问题描述】：

我正在尝试在 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 ?

谢谢

【问题讨论】：

Specify width in *characters*的可能重复

【参考方案1】：

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

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

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

【讨论】：

有没有办法基于字符的宽度？像 10 个字符？我在网上搜索 - 看到了一些基于 px 的宽度示例。我的 javascript 不太好用 - 所以询问字符

不仅仅是css和html，没有。你没有把javascript放在标签中。这完全符合您的要求。

我也有同样的想法。你速度更快。这是完整的 sn-p 的小提琴：jsfiddle.net/eu7n7f0a@hypermails