固定宽度 div，根据长度动态调整文本大小

发布于 2024-08-24 10:57:07 字数 814 浏览 7 评论 0原文

假设您有一个简单的固定宽度布局，可以从 MySQL 数据库中提取 title。

CSS：

 #wrapper {
    width: 800px;
 }

 h1 {
    width: 100%;
 }

HTML：

 <html>
  <body>
   <div id="wrapper">
    <h1> $titleString </h1>
   </div>
  </body>
 </html>

但问题是，从 MySQL 数据库中提取的标题字符串的长度差异很大。有时可能是 10 个字符，有时可能是 80 个字符。最大字符数。

如果可能的话，我如何获得

`$titleString`

的 text-size 来动态放大/缩小这样的字符串只在一行上并且最适合该行长度？我见过很多关于调整 div 大小的问题 - 但就我而言，div 必须始终为 100% (800px)，并且我希望最适合标题。

显然，必须设置最大 text-size 值，这样 5 个字符串才不会变得庞大。

有人有建议吗？目前我在此页面上仅使用 PHP/MySQL/CSS，但如果可以解决问题，那么合并其他语言也可以。

我唯一能想到的是一种暴力方法，通过反复试验，我建立了与 CSS em 大小相匹配的可接受的字符串字符计数范围，但从代码方面来看，这是一个相当丑陋的实现。

原文

Let's say you've got a simple fixed-width layout that pulls a title from a MySQL database.

CSS:

 #wrapper {
    width: 800px;
 }

 h1 {
    width: 100%;
 }

HTML:

 <html>
  <body>
   <div id="wrapper">
    <h1> $titleString </h1>
   </div>
  </body>
 </html>

But the catch is, the length of the title string pulled from your MySQL database varies wildly. Sometimes it might be 10 characters, sometimes it might be 80. It's possible to establish a min & max character count.

How, if at all possible, do I get the text-size of my <h1>$titleString</h1> to enlarge/decrease on-the-fly such that the string is only ever on one line and best fit to that line length? I've seen a lot of questions about resizing the div - but in my case the div must always be 100% (800px) and I want to best-fit the title.

Obviously a maximum text-size value would have to be set so 5 character strings don't become gargantuan.

Does anyone have a suggestion? I'm only using PHP/MySQL/CSS on this page at the moment, but incorporation of another language is fine if it means I can solve the problem.

The only thing I can think of is a bruteforce approach whereby through trial and error I establish acceptable string character count ranges matched with CSS em sizes, but that'd be a pretty ugly implementation from the code side.

分享到QQ

分享到微博

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

发布评论

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

鼻尖触碰 2024-08-31 10:57:07

我在 php 中使用了一种非常简单的方法，运气很好。需要对数字进行一些调整以匹配您的应用程序：我有一个标题空间，可以在字体大小：1.65em 下容纳大约 30 个字符，因此我按比例制作了较长的标题和较小的字体大小，如下所示：

$title = $row->title;
$title_length = strlen($title);
if ($title_length > 30)
    $title_size = 1.65 * (30 / $title_length);
else $title_size = 1.65;

print('<span style="font-size: '.$title_size.'em;display: inline;">'. $title.'</span>');

I've had some luck using a pretty simple approach in php. Takes some playing with the numbers to match your application: I had a space for the title that could fit about 30 characters at font-size: 1.65em, so I made longer titles proportionately a smaller font-size like so:

$title = $row->title;
$title_length = strlen($title);
if ($title_length > 30)
    $title_size = 1.65 * (30 / $title_length);
else $title_size = 1.65;

print('<span style="font-size: '.$title_size.'em;display: inline;">'. $title.'</span>');

回复收藏 0 原文

何必那么矫情 2024-08-31 10:57:07

也许一种解决方案是使用 javascript 以某种标准字体大小计算给定文本的宽度，然后调整大小直到获得合理的宽度。在 Javascript 中，您可以这样计算文本的宽度：

 var title = document.getElementById("title");
 var width = title.offsetWidth;

最初，文本被放置在一个范围内，除了字体大小之外，没有应用任何样式。

 <span id="title">The Title</span>

然后，您可以检查文本的宽度是否大于 800px，并减小字体大小，直到宽度小于或等于。重要的是，标题跨度最初不应应用其他样式，否则结果将是错误的。

您还可以检查宽度是否太短，可能小于200px，并相应地增加字体大小。

一旦您对文本大小感到满意，请将文本移动到 h1 并设置字体大小。

此问题描述了计算文本宽度。

例如，我使用 jQuery 快速编写了这个。假设您的 HTML 如下所示：

<span id="mytitle" style="font-size:14pt;">
    A very long title that may be more than 800px in width. And even longer.
</span>

我使用了跨度，因为它会根据文本而不是容器的宽度调整大小。而jQuery代码：

 $(document).ready(function(){        
    var w = $("#mytitle").width();
    while(w > 800){
       var currentFontSize = $('#mytitle').css('font-size');
       var currentFontSizeNum = parseFloat(currentFontSize, 10);
       var newFontSize = currentFontSizeNum*0.95;
       $('#mytitle').css('font-size', newFontSize);
       w = $("#mytitle").width();
   //alert("Width:" + w);
}
  });

即反复将font-size减小5%，直到总宽度小于等于800px。

Maybe one solution would be to use javascript to calculate the width of the given text in some standard font size, then resize until you get a reasonable width. In Javascript you can calculate the width of the text like this:

 var title = document.getElementById("title");
 var width = title.offsetWidth;

Initailly the text is placed in a span with no styles applied apart from the font-size.

 <span id="title">The Title</span>

You can then check if the width of the text is greater than 800px and reduce the font-size until the width is less than or equal to. It is important that the title span does not have other styles applied to it initially or the results will be wrong.

You can also check if the width is too short, maybe less than 200px and increase the font-size accordingly.

Once you have satisfied yourself that the text is sized appropriately then move the text into the h1 and set the font-size.

This question describes calculating text width.

For example, I quickly wrote this using jQuery. Suppose you have your HTML like this:

<span id="mytitle" style="font-size:14pt;">
    A very long title that may be more than 800px in width. And even longer.
</span>

I used a span because it resizes to the width of the text rather than the container. And the jQuery code:

 $(document).ready(function(){        
    var w = $("#mytitle").width();
    while(w > 800){
       var currentFontSize = $('#mytitle').css('font-size');
       var currentFontSizeNum = parseFloat(currentFontSize, 10);
       var newFontSize = currentFontSizeNum*0.95;
       $('#mytitle').css('font-size', newFontSize);
       w = $("#mytitle").width();
   //alert("Width:" + w);
}
  });

That is, repeatedly reduce the font-size by 5% until the total width is less than or equal to 800px.

回复收藏 0 原文

~没有更多了~