4

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

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

4

7 回答 7

9

控制溢出

真正的技巧只是设置文本框大小的限制，并确保没有溢出问题。您可以使用溢出：隐藏来处理这个问题，并显示：阻止元素，以便为其提供所需的确切尺寸。

等宽是可选的

是的，您可以使用等宽字体。如果您想要跨浏览器解决方案，则只有少数可供选择。您也可以使用可变宽度字体。等宽字体只会帮助您与所描述的大写问题保持一致。使用等宽字体将帮助您选择适用于不同文本长度的合适宽度。在下面的示例中，我任意选择了 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>
于 2008-10-03T21:56:30.900 回答
3

当您说“动态切断结尾”时，假设 CSS 规则如下：

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

会根据需要“切断”吗？

于 2008-10-03T21:39:01.420 回答
2

您也可以尝试省略号解决方案。以最大宽度截断文本并应用省略号。就像是：

我的标题太长了...

CSS3 有 text-overflow: ellipsis 你可以使用，但它在 Firefox 中不受支持。

Hedger Wang 找到了一个我用过几次的解决方法。很方便。

于 2008-10-03T22:17:40.967 回答
1

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

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

于 2008-10-03T21:38:44.867 回答
1

MrZebra 在如何隐藏溢出方面是正确的，但如果您想使用一种有吸引力的固定宽度字体，您可以使用 CSS font-family 进行设置，但请确保为没有该字体的人提供后备。

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

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

于 2008-10-03T21:43:16.497 回答
0

您可以尝试使用 javascript 以编程方式测试以查看字体的宽度，如果它太大，请降低一步并重试。不要测试宽度，而是查看元素的高度是否超过一行（以 em 为单位，因为您将更改字体大小）。

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”位。

于 2008-10-03T22:08:23.747 回答
0

而不是试图限制你的 <h1> 的高度，我会调整你的 CSS 以使你的网站更加流畅 - 毕竟，如果用户增加他们的文本大小，你不希望你的网站出现损坏。

尝试以 em 而不是像素设置 h1 的高度。如果将其添加到 CSS 中：

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

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

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

希望这可以帮助。

于 2008-10-07T12:32:19.960 回答