我试图显示一系列从60个字符到160左右的标题,并且大写字母各不相同,其中一些是全部大写,一半是大写字母.当它大部分是小写时,整个160个字符的文字符合我想要的宽度,但是当它开始获得更多的大写(它们必须更宽)时,它开始流动.
有没有办法使用有吸引力的固定witdh字体(大写和小写宽度相同),或动态缩小文本以适应,或以其他方式识别文本将在服务器端采取多少空间,并切断动态结束？或者你们有更好的解决方案吗？
控制溢出
真正的诀窍是设置文本框大小的限制,并确保没有溢出问题.您可以使用overflow:hidden来处理此问题,并显示:阻止元素以便为其提供所需的精确尺寸.
Monospace是可选的
是的,你可以使用等宽字体..如果你想要一个跨浏览器的解决方案,只有少数可供选择.您也可以使用可变宽度字体.等宽字体只会帮助您与所描述的大小写问题保持一致.使用等宽字体将帮助您选择适用于不同文本长度的良好宽度.在下面的示例中,我任意选择了250像素的宽度,并输入字符串,直到它们远远超出限制,仅用于说明目的.
线高和边距
您希望文本的行高与框的高度相匹配..在这种情况下,我使用了20个像素.如果需要创建线高,可以添加下边距.
旁注:我在这里使用过h3,因为文本在页面上重复多次.通常,对于更常见的文本(仅仅是语义选择)使用较低级别的标题是更好的选择.使用h1将以相同的方式工作..
<html>
<head>
<title>h1 stackoverflow question</title>
<style type="text/css">
* { margin:0; padding:0 }
h3 {
display: block;
width: 250px;
height: 20px;
margin-bottom: 5px;
overflow: hidden;
font-family: Courier, Lucidatypewriter, monospace;
font: normal 20px/20px Courier;
border: 1px solid red;
}
</style>
</head>
<body>
<h3>Hello, World</h3>
<h3>Lorem Ipsum dolor sit Amet</h3>
<h3>Adipiscing Lorem dolor sit lorem ipsum</h3>
<h3>"C" is for Cookie, that's good enough for lorem ipsum</h3>
<h3>Oh, it's a lorem ipsum dolor sit amet. Adipiscing elit.</h3>
</body>
</html>