当前位置： 文江博客话题详情

使

无论文本大小写如何，标记相同的最大宽度

发布于 2024-07-06 07:16:57 字数 234 浏览 8 评论 0原文

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

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

原文

I'm trying to display a series of titles varying from 60 characters to 160 or so and the capitalization varies, some of it all caps, some half caps. When it's mostly lowercase the whole 160 characters of text fits in the width I want, but when it starts getting more caps (they must be wider), it starts over flowing.

Is there a way to use an attractive fixed witdh font (upper and lowercase widths the same too), or dynamically shrink the text to fit, or otherwise recognize how much space the text is going to take on the server side, and cut off the end dynamically? Or do you folks have a better solution?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（7）

决绝 2024-07-13 07:16:57

控制溢出

真正的技巧是设置文本框大小的限制，并确保不存在溢出问题。 您可以使用overflow:hidden来处理这个问题，并使用display:阻塞元素来为其提供所需的确切尺寸。

等宽字体是可选的

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

Control the Overflow

The real trick is just setting a limit on size of the text box, and making sure that there aren't overflow problems. You can use overflow: hidden to take care of this, and display: block the element in order to give it the exact dimensions you need.

Monospace is Optional

Yes, you can use a monospace font.. there are only a few to choose from if you want a cross-browser solution. You can use a variable-width font, too.. the monospace will just help you get consistency with the capitalization problem you described. Using a monospace font will help you to choose a good width that will work for different text lengths. In my example below, I've arbitrarily chosen a width of 250 pixels, and typed strings until they were well past the limit, just for the purposes of illustration.

Line-heights and Margins

You want the line height of the text to match the height of the box.. in this case, I've used 20 pixels. If you need to create line height, you can add a bottom margin.

Side note: I've used an h3 here, because the text is repeated many times across the page. In general it's a better choice to use a lower level of header for more common text (just a semantic choice). Using an h1 will work the same way..

<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>
回复 原文
迷荒 2024-07-13 07:16:57

当你说“动态切断末端”时，我假设像这样的CSS规则

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

会“按照你想要的方式切断末端”，这是错误的吗？

When you say "cut off the end dynamically", am I wrong in assuming that a CSS rule like:

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

would "cut the end off" as you want?

回复 原文
白色秋天 2024-07-13 07:16:57

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

我的标题对于这个来说太长了...

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

Hedger Wang 找到了一个解决方法，我已经用过几次了。 非常方便。

You could also try an ellipsis solution. Truncate the text at a maximum width and apply an ellipsis. Something like:

My title is way too long for this...

CSS3 has text-overflow: ellipsis you can use, but it's not supported in Firefox.

Hedger Wang has found a workaround that I have used a couple times. Pretty handy.

回复 原文
二货你真萌 2024-07-13 07:16:57

您可以修复宽度并隐藏溢出， style="width: XPx; Overflow: hide;"

这将限制宽度并在太宽时切断末端。

You could fix the width and hide the overflow, style="width: Xpx; overflow: hidden;"

That will limit the width and cut off the end if it's too wide.

回复 原文
半枫 2024-07-13 07:16:57

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

如果您愿意，您还可以使用 CSS 通过“文本转换”强制大写（尽管从您的阅读来看，这不是您想要的）。

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

MrZebra is right in how to hide the overflow, but if there's an attractive fixed width font you want to use you can set it with CSS font-family, just be sure to give it a fallback for people without the font.

You could also use CSS to enforce the capitalization with 'text-transform', if you wanted (though from your reading, that's not your desire).

font-variant:small-caps might work, too.

回复 原文
止于盛夏 2024-07-13 07:16:57

您可以尝试使用 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”位。

You could try using javascript to programmatically test to see the width of the font, and if it's too large, take it down a step and try again. Instead of testing the width, see if the height of the element is more than one line (measured in ems, since you'll be changing the font size around).

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;
}

you'll have to figure out that "oneLine" bit for yourself, sorry.

回复 原文
风和你 2024-07-13 07:16:57

而不是试图限制

的高度 我会调整您的 CSS 以使您的网站更加流畅 - 毕竟，您不希望您的网站在用户增加文本大小时显得损坏。

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

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

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

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

希望这会有所帮助。

Rather than trying to constrain the height of your <h1> I would adjust your CSS to make your site more fluid - afterall, you don't want your site to appear broken if the user increases their text size.

Try setting the h1's height in ems rather than pixels. If you add this to your CSS:

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

It will make 1em = 10px, so then you can set your heading's height to:

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

Hope this helps.

回复 原文
~没有更多了~

关于作者

潇烟暮雨

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

ni139999

文章 0 评论 0

Smile

文章 0 评论 0

木子李

文章 0 评论 0

仅此而已

文章 0 评论 0

qq_2gSKZM

文章 0 评论 0

内心激荡

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文