使<h1>标记具有相同的最大宽度,而不管其中的文本大小写

我试图显示一系列从60个字符到160左右的标题,并且大写字母各不相同,其中一些是全部大写,一半是大写字母.当它大部分是小写时,整个160个字符的文字符合我想要的宽度,但是当它开始获得更多的大写(它们必须更宽)时,它开始流动.

有没有办法使用有吸引力的固定witdh字体(大写和小写宽度相同),或动态缩小文本以适应,或以其他方式识别文本将在服务器端采取多少空间,并切断动态结束？或者你们有更好的解决方案吗？

控制溢出

真正的诀窍是设置文本框大小的限制,并确保没有溢出问题.您可以使用overflow:hidden来处理此问题,并显示:阻止元素以便为其提供所需的精确尺寸.

Monospace是可选的

是的,你可以使用等宽字体..如果你想要一个跨浏览器的解决方案,只有少数可供选择.您也可以使用可变宽度字体.等宽字体只会帮助您与所描述的大小写问题保持一致.使用等宽字体将帮助您选择适用于不同文本长度的良好宽度.在下面的示例中,我任意选择了250像素的宽度,并输入字符串,直到它们远远超出限制,仅用于说明目的.

线高和边距

您希望文本的行高与框的高度相匹配..在这种情况下,我使用了20个像素.如果需要创建线高,可以添加下边距.

旁注:我在这里使用过h3,因为文本在页面上重复多次.通常,对于更常见的文本(仅仅是语义选择)使用较低级别的标题是更好的选择.使用h1将以相同的方式工作..

Hello, World
Lorem Ipsum dolor sit Amet
Adipiscing Lorem dolor sit lorem ipsum
"C" is for Cookie, that's good enough for lorem ipsum
Oh, it's a lorem ipsum dolor sit amet.  Adipiscing elit.