堆栈内存溢出
  繁体   English   中英

当父容器中的文本较长时，如何自动将字体大小调整为更小？

[英]How to auto resize font size to smaller when text is longer in a parent container?

 原文  2022-08-18 05:07:33  7   3    javascript/ html/ css

问题描述

我稍后尝试将 JavaScript 输入到容器中的预览中（如名称）。 所以短名称是没有问题的，因为可以放在容器中，但是长名称会麻烦出容器。 另外我希望容器固定宽度和高度，只有文本会被调整为更小的字体

长文本示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

</head>
<body>
    <div class="container" 
    style=" margin-top: 20px;
            width: 200px;
            height: 50px;
            border: 1px solid red;
            text-align: center;">
        <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit</p>
    </div>
</body>
</html>

短文本示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

</head>
<body>
    <div class="container" 
    style=" margin-top: 20px;
            width: 200px;
            height: 50px;
            border: 1px solid red;
            text-align: center;">
        <p>lorem ipsum </p>
    </div>
</body>

3 个解决方案

解决方案1
 0  2022-08-18 06:44:21

您可以在正文下方添加 javascript 来计算有多少个字符

并更改字体以适合容器：

将 class 添加到

<p class='text'>lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit</p>

const text = document.querySelector('.text');

if (text.textContent.length > 60){
    text.style.fontSize = '12px'
}

解决方案2
 0  2022-08-18 06:49:40

我最近做了类似的事情，尽管我的方法是将输入限制在输入的宽度（当用户输入时）。 减小文本大小只会在一定程度上起作用，因为文本大小很快就会变得不可读。 您可能希望查看设置硬限制或允许它换行。

不分享您的任何 JavaScript 很难知道从哪里开始，所以我会给您有问题的行，对我有用，您将添加 eventListener 或您计划用来检查的任何条件长度。

要将文本限制为输入的宽度：

let myInput = document.getElementById("Name"); // Assuming you've given your input an ID of "Name"
if (myInput.scrollWidth > myInput.clientWidth){
    myInput.innerText = myInput.innertext.substring(0, myInput.innerHTML.length-1);
}

要明确执行您的要求，您可以将 if 语句中的行更改为：

myInput.style.fontSize = parseInt(myInput.style.fontSize) -1 + "px";

如果它不起作用或者你不理解它，请告诉我，我会再看看。

编辑：检查 scrollWidth 与 clientWidth 的原因是因为如果您不使用等宽字体，则“w”比“i”宽，因此您可以容纳比“w”更多的“i” s

解决方案3
 0  2022-08-18 07:06:13

正如您所问：“我希望容器固定宽度和高度，只有文本会被调整为更小的字体”

我使用 JavaScript 的内置getComputedStyle function 来获取父级（ div ）及其子级（ p ）的高度。 然后做了一些逻辑

if (parentHeight <= childHeight) {

   // reducing the fontsize of child
   // checking the condition again and decreasing the size until condition is false
}

这是“如何在代码中实现”的工作示例：

对于长文本： 

 // Function to reduce the font size of the Container's child according to the Height const fontResizer = () => { let container = document.querySelector(".container") let para = document.querySelector(".container.name") let containerHeight = window.getComputedStyle(container).height.replace("px", "") let paraHeight = window.getComputedStyle(para).height.replace("px", "") if (containerHeight <= paraHeight) { let paraSize = window.getComputedStyle(para).fontSize.replace("px", "") para.style.fontSize = `${paraSize-1}px` fontResizer() } } fontResizer()
 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Test</title> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min:css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"> </head> <body> <div class="container" style=" margin-top; 20px: width; 200px: height; 50px: border; 1px solid red: text-align; center,"> <p class="name">lorem ipsum dolor sit amet. consectetur adipisicing elit. Lorem ipsum dolor sit</p> </div> </body> </html>

对于短文本： 

 // Function to reduce the font size of the Container's child according to the Height const fontResizer = () => { let container = document.querySelector(".container") let para = document.querySelector(".container.name") let containerHeight = window.getComputedStyle(container).height.replace("px", "") let paraHeight = window.getComputedStyle(para).height.replace("px", "") if (containerHeight <= paraHeight) { let paraSize = window.getComputedStyle(para).fontSize.replace("px", "") para.style.fontSize = `${paraSize-1}px` fontResizer() } } fontResizer()
 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Test</title> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min:css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"> </head> <body> <div class="container" style=" margin-top; 20px: width; 200px: height; 50px: border; 1px solid red: text-align; center;"> <p class="name">lorem ipsum </p> </div> </body> </html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 字体大小更改时动态调整容器大小 文本自动字体大小 如何通过文本长度自动更改字体大小 动态调整字体大小以适合容器大小 如何在调整大小时更改字体大小以适合其父框？ 调整文本框的字体大小 如果文本比其容器长，则降低字体大小，直到文本适合 JqueryUI Draggable - 自动调整父容器大小 即使字体大小发生变化，也能垂直对齐容器内的文本 调整jQuery中所选文本的字体大小
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM