Question

我正在尝试显示一系列不同于60个字符到160左右的标题，并且大小写有所不同，其中一些是全部大写，一半是大写。当它大部分是小写时，整个160个字符的文字符合我想要的宽度，但当它开始获得更多的上限（它们必须更宽）时，它开始流动。

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

Answer 1

控制溢出

真正的诀窍是设置文本框大小的限制，并确保没有溢出问题。你可以使用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>&quot;C&quot; 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>

Answer 2

当你说“动态切断结束”时，我错误地认为CSS规则如下：

h1 {
    width: 400px; /* or whatever width */
    overflow: hidden;
}

会根据你的意愿“结束”吗？

Answer 3

您还可以尝试省略号解决方案。以最大宽度截断文本并应用省略号。类似的东西：

我的头衔太长了......

CSS3有文本溢出：您可以使用省略号，但在Firefox中不支持。

Hedger Wang找到了workaround我曾经使用过几次。非常方便。

Answer 4

您可以修复宽度并隐藏溢出style="width: Xpx; overflow: hidden;"

如果它太宽，那将限制宽度并切断末端。

Answer 5

MrZebra对如何隐藏溢出是正确的，但是如果你想使用一个有吸引力的固定宽度字体，你可以用CSS font-family设置它，只要确保给没有字体的人一个后备。< / p>

如果你愿意，你也可以使用CSS来强制使用'text-transform'来强制大写（尽管从你的阅读中可以看出，这不是你的愿望）。

font-variant:small-caps也可能有用。

Answer 6

您可以尝试使用javascript以编程方式测试以查看字体的宽度，如果它太大，请将其向下移动并再试一次。而不是测试宽度，看看元素的高度是否超过一行（以ems为单位，因为你将改变字体大小）。

var fontSize = "200%";  // your regular heading font size
var h1 = document.getElementById("myHeading");
while (h1.offsetHeight > oneLine) {
    fontSize *= (parseInt(fontSize) - 5) + "%";
    h1.style.fontSize = fontSize;
}

你必须为自己找出“oneLine”，抱歉。

Answer 7

而不是试图约束你的＆lt; h1＆gt;的高度。我会调整你的CSS以使你的网站更流畅 - 毕竟，如果用户增加文字大小，你不希望你的网站出现故障。

尝试以ems而不是像素设置h1的高度。如果你把它添加到你的CSS：

body {
    font:62.5%/140% Courier, Lucidatypewriter, monospace;
}

它将使1em = 10px，因此您可以将标题的高度设置为：

h1, h3 {
    ....
    height:2em;
    ....
}

希望这有帮助。

无论</h1>中的文本大写，都使<h1>标记具有相同的最大宽度

7 个答案: