草庐IT

javascript - 调整文本大小以完全填满容器

coder 2023-08-09 原文

我有一个具有固定高度和可变宽度(body 宽度的 15%)的 div。我想让里面的段落文字完全填满div；不会溢出也不会底部填充。

我已经尝试使用 jQuery 增加文本大小，直到段落的高度等于容器 div 的高度。那时，文本应该完全覆盖 div。唯一的问题是字体大小以 0.5px 值递增。你不能做 33.3px；它必须是 33.0px 或 33.5px。所以在 33px 时，我的文本太短而无法覆盖 div，而在 33.5px 时它会溢出。

有没有人知道如何解决这个问题？有很多插件可以让文本填满容器的整个宽度，但不适用于必须同时填满宽度和高度的文本。至少，我没有见过。

<head>
<style type="text/css">
.box {
    display:block;
    position:relative;
    width:15%;
    height:500px;
    background:orange;
}
    .box p {
        background:rgba(0,0,0,.1); /* For clarity */
    }
</style>
</head>

<body>

<div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br><br>
    Suspendisse varius nibh quis urna porttitor, pharetra elementum nisl egestas. Suspendisse libero lacus, faucibus id convallis sit amet, consequat vitae odio.</p>
</div>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
function responsiveText(){
    var i = 0.5;

    do {
        $(".box p").css("font-size",(i) + "px");

        var textHeight          =  $(".box p").height(),
            containerHeight     =  $(".box").height();
        i += 0.5;   

    } while ( textHeight < containerHeight );           // While the height of the paragraph block is less than the height of the container, run the do...while loop.
} responsiveText();


$(window).resize(function(e) {
    responsiveText();
});
</script>
</body>

文本设置为 33px。太短了。

文本设置为 33.5 像素。它溢出了。

最佳答案

I adjusted your function使用em单位代替px，并将增量从“0.5”调整为“0.003”。

预览面板有点不可靠，所以check it out in its own window .

请记住:

  • 增量越大，循环次数越少(也越少 处理)。
  • 增量越小，调整越“精细” 和结果。

关于javascript - 调整文本大小以完全填满容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25528559/

填满容器codesection34javascriptjqueryhtmlcss

有关javascript - 调整文本大小以完全填满容器的更多相关文章

  1. ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2

    我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，

  2. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  3. ruby - 完全离线安装RVM - 2

    我打算为ruby​​脚本创建一个安装程序，但我希望能够确保机器安装了RVM。有没有一种方法可以完全离线安装RVM并且不引人注目(通过不引人注目，就像创建一个可以做所有事情的脚本而不是要求用户向他们的bash_profile或bashrc添加一些东西)我不是要脚本本身，只是一个关于如何走这条路的快速指针(如果可能的话)。我们还研究了这个很有帮助的问题:RVM-isthereawayforsimpleofflineinstall?但有点误导，因为答案只向我们展示了如何离线在RVM中安装ruby。我们需要能够离线安装RVM本身，并查看脚本https://raw.github.com/wayn

  4. HBase Region 简介和建议数量&大小 - 2

    Region是HBase数据管理的基本单位,region有一点像关系型数据的分区。region中存储这用户的真实数据，而为了管理这些数据，HBase使用了RegionSever来管理region。Region的结构hbaseregion的大小设置默认情况下，每个Table起初只有一个Region，随着数据的不断写入，Region会自动进行拆分。刚拆分时，两个子Region都位于当前的RegionServer，但处于负载均衡的考虑，HMaster有可能会将某个Region转移给其他的RegionServer。RegionSplit时机：当1个region中的某个Store下所有StoreFile

  5. ruby-on-rails - Ruby 中意外的大小写行为 - 2

    我在一段非常简单的代码(如我所想)中得到了一个错误的值:org=4caseorgwhenorg=4val='H'endputsval=>nil请不要生气，我希望我错过了一些非常明显的东西，但我真的想不通。谢谢。 最佳答案 这是典型的Ruby错误。case有两种被调用的方法，一种是你传递一个东西作为分支的基础，另一种是你不传递的东西。如果您确实在case中指定了一个表达式语句然后评估所有其他条件并与===进行比较.在这种情况下org评估为false和org===false显然不是真的。所有其他情况也是如此，它们要么是真的，要么是假的。

  6. ruby - 改变替换的大小写 - 2

    我有以下内容:text.gsub(/(lower)(upper)/,'\1\2')我可以将\2替换为大写吗？类似于:sed-e's/\(abc\)/\U\1/'这在Ruby中可行吗？ 最佳答案 查看gsub文档:str.gsub(模式){|匹配|block}→new_str在block形式中，当前匹配字符串作为参数传入，$1、$2、$`、$&、$'等变量将被适当设置。block返回的值将替换为每次调用的匹配项。"alowerupperb".gsub(/(lower)(upper)/){|s|$1+""+$2.upcase}

  7. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  8. ruby-on-rails - rspec - 我怎样才能让 "pendings"有我的文本而不仅仅是 "No reason given" - 2

    我有这个代码:context"Visitingtheusers#indexpage."dobefore(:each){visitusers_path}subject{page}pending('iii'){shouldhave_no_css('table#users')}pending{shouldhavecontent('Youhavereachedthispageduetoapermissionic错误')}它会导致几个待处理，例如ManagingUsersGivenapractitionerloggedin.Visitingtheusers#indexpage.#Noreason

  9. ruby-on-rails - Ruby on Rails 3 中的类方法——我完全迷路了! - 2

    背景here.在上面的链接中，给出了以下示例:classauthor.id)endend除了这种语法对于像我这样的初学者来说很陌生——我一直认为类方法是用defself.my_class_method定义的——我在哪里可以找到关于类的文档RubyonRails中的方法？据我所知，类方法总是在类本身(MyClass.my_class_method)上调用，但如果R​​ails中的类方法是可链接的，似乎必须进行其他操作在这里!编辑:我想我通过对类方法的语法发表评论有点被骗了。我真的想问Rails如何使类方法可链接—我了解方法链接的工作原理，但不知道Rails如何允许您链接类方法而无需实际返

  10. ruby - 如何为 pbcopy 生成富文本链接 - 2

    我一直在玩一个脚本，它在Chrome中获取选定的文本并在Google中查找它，提供四个最佳选择，然后粘贴相关链接。它以不同的格式粘贴，具体取决于当前在Chrome中打开的页面-DokuWiki打开的DokuWiki格式，普通网站的HTML，我想要我的WordPress所见即所得编辑器的富文本。我尝试使用pbpaste-Preferrtf来查看没有其他样式的富文本链接在粘贴板上的样子，但它仍然输出纯文本。在文本编辑中保存文件并进行试验后，我想出了以下内容text=%q|{\rtf1{\field{\*\fldinst{HYPERLINK"URL"}}{\fldrsltTEXT}}}|te

随机推荐