如何使用 CSS 确保段落具有固定数量的字符？答案

【问题标题】：How can i ensure the paragraph have fixed number of characters with CSS?如何使用 CSS 确保段落具有固定数量的字符？
【发布时间】：2018-07-10 21:33:27
【问题描述】：

例如，我希望使用 CSS 在下面的文本段落中精确 9 个字符（没有额外的字符/空格）。（我将宽度设置为 9rem，字体大小设置为 1rem 下面）

尝试了字母间距、内联块、等宽字体等，但没有运气。

.texts {
  display: inline-block;
  width: 9rem;
  font-size: 1rem;
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid palevioletred;
  padding: 0;
  line-height: 1;
  letter-spacing: 0;
}

&lt;p class='texts'&gt;ninechars with extra chars&lt;/p&gt;

【问题讨论】：

width:9ch ? stackoverflow.com/a/26975271/244811
如果您使用display: inline-block，宽度将适合内容。这是我们想要的吗？
@arbuthnott 感谢您的建议，抱歉我对问题的描述不佳。似乎有一个答案可以满足我的要求，只需要确认即可。

标签： html css

【解决方案1】：

是的，您可以在使用下面的代码后实现您的目标

p.texts { overflow: hidden; max-width: 9ch; }

&lt;p class='texts'&gt;ninechars&lt;/p&gt;

您可以在这里查看兼容性 - https://caniuse.com/#search=ch

【讨论】：

【解决方案2】：

   <style> 
   #para1 {
        white-space: nowrap; 
        max-width: 9ch;
        overflow: hidden;
        text-overflow: ellipsis; 
        border: 1px solid #000000;
    }
    </style>

    <p id="para1">Lorem ipsum dolor sit amet, consectetur adipiscing </p>

【讨论】：