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

如何根据需要调整文本大小？

发布于 2024-11-09 03:24:55 字数 104 浏览 0 评论 0原文

我有一个页面，在其中我以某种显示的方式动态地将名称读取到内容区域中。我们有一些人的名字非常长，有些名字有25个字符长，而大多数在12-13个字符左右。如何根据需要调整放入 div 中的文本大小？

原文

分享到QQ

分享到微博

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

发布评论

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

盗琴音 2024-11-16 03:24:55

根据文本长度设置字体大小。您没有发布任何代码，因此我只能假设您的 HTML 的外观。

<div id="names" style="width: 140px; border: 1px solid black; overflow:hidden">
    <div style="white-space: nowrap">Some Name</div>
    <div style="white-space: nowrap">Some Very Very Long Name</div>
</div>

这可能是使用 jQuery 的 JavaScript。

$(function() {
    $('#names div').each( function(idx, item) {
       if( $(this).width() > $(this).parent().width() ) {
           $(this).css('font-size', Math.floor($(this).parent().width() / $(this).width() * parseInt($(this).css('font-size'))));
       }
    });
});

Set the font size according to the text length. You did not post any code so I can only assume how your HTML may look like.

<div id="names" style="width: 140px; border: 1px solid black; overflow:hidden">
    <div style="white-space: nowrap">Some Name</div>
    <div style="white-space: nowrap">Some Very Very Long Name</div>
</div>

This could be the JavaScript using jQuery.

$(function() {
    $('#names div').each( function(idx, item) {
       if( $(this).width() > $(this).parent().width() ) {
           $(this).css('font-size', Math.floor($(this).parent().width() / $(this).width() * parseInt($(this).css('font-size'))));
       }
    });
});

回复收藏 0 原文

~没有更多了~