Question

我的想法是让div展示两个文本行如何相互比较，具体取决于文本长度和字体大小。

问题是，我想在一个固定宽度的div中展示它。

因此，最大的文本行（不一定是具有最大字体的文本行或具有最多字符的文本行）应该调整大小以始终到达div的边缘 - 在一行上。

同时，还应调整不那么宽的文本行的字体大小以保持两行之间的比例。

我刚刚写了这段代码：

脚本

<script>
 function typeFunction() {
document.getElementById('boxOne').innerHTML = document.getElementById("lineOne").value;
document.getElementById('boxTwo').innerHTML = document.getElementById("lineTwo").value;

document.getElementById('boxPreviewOne').innerHTML = document.getElementById("lineOne").value;
document.getElementById('boxPreviewTwo').innerHTML = document.getElementById("lineTwo").value;

checkWidth();
}

function fontSize(fontsize,target) {
target.style.fontSize = fontsize;
checkWidth();
} 

function checkWidth() {
ratio = document.getElementById("sizeOne").value.replace(/\D/g, '')/document.getElementById("sizeTwo").value.replace(/\D/g, '');

widthOne = document.getElementById("boxOne").offsetWidth;
widthTwo = document.getElementById("boxTwo").offsetWidth;

if (widthOne >= widthTwo) {
document.getElementById('boxPreviewOne').style.fontSize = "MAX_FONT_SIZE";
if (ratio>=1) {
document.getElementById('boxPreviewTwo').style.fontSize = "MAX_FONT_SIZE/ratio";
} else {
document.getElementById('boxPreviewTwo').style.fontSize = "MAX_FONT_SIZE*ratio";
}
} else {
document.getElementById('boxPreviewTwo').style.fontSize = "MAX_FONT_SIZE";
if (ratio>=1) {
document.getElementById('boxPreviewOne').style.fontSize = "MAX_FONT_SIZE*ratio";
} else {
document.getElementById('boxPreviewOne').style.fontSize = "MAX_FONT_SIZE/ratio";
}
}
}
</script>

HTML

Line One: <input id="lineOne" onKeyUp="typeFunction()" value="This is line one">
<select id="sizeOne" onchange="fontSize(this.value,boxOne);">   
<option value="10px">10 cm</option>        
<option value="20px" selected="selected">20 cm</option>  
<option value="30px">30 cm</option>      
</select> 

<br>
Line Two: <input id="lineTwo" onKeyUp="typeFunction()" value="This is line two">
<select id="sizeTwo" onchange="fontSize(this.value,boxTwo);">   
<option value="10px" selected="selected">10 cm</option>        
<option value="20px">20 cm</option>  
<option value="30px">30 cm</option>      
</select>

<br>
<br>


<div style="width:700px;">
<span id="boxOne" style="font-size:20px">This is line one</span><br>
<span id="boxTwo" style="font-size:10px">This is line two</span>
</div>

<br><br>
Preview:<br>
<div class="Mainbox" style="width:400px;border:1px solid black">
<span id="boxPreviewOne" style="font-size:64px">This is line one</span><br>
<span id="boxPreviewTwo" style="font-size:32px">This is line two</span>
</div>


Line One: <input id="lineOne" onKeyUp="typeFunction()" value="This is line one">
<select id="sizeOne" onchange="fontSize(this.value,boxOne);">   
<option value="10px">10 cm</option>        
<option value="20px" selected="selected">20 cm</option>  
<option value="30px">30 cm</option>      
</select> 

<br>
Line Two: <input id="lineTwo" onKeyUp="typeFunction()" value="This is line two">
<select id="sizeTwo" onchange="fontSize(this.value,boxTwo);">   
<option value="10px" selected="selected">10 cm</option>        
<option value="20px">20 cm</option>  
<option value="30px">30 cm</option>      
</select>

<br>
<br>


<div style="width:700px;">
<span id="boxOne" style="font-size:20px">This is line one</span><br>
<span id="boxTwo" style="font-size:10px">This is line two</span>
</div>

<br><br>
Preview:<br>
<div class="Mainbox" style="width:400px;border:1px solid black">
<span id="boxPreviewOne" style="font-size:64px">This is line one</span><br>
<span id="boxPreviewTwo" style="font-size:32px">This is line two</span>
</div>

以下是概念场景的代码+图像的示例图像：
enter image description here

enter image description here

恐怕这就是我自己可以走的那样。
显然还有很长的路要走。

我更喜欢只将文本输入镜像一次，但我认为不可能找到最宽的行。
我不知道如何得到我所谓的“MAX_FONT_SIZE”

Answer 1

这是一个jQuery解决方案，可以满足您的需求。使用em单位的字体大小使它更简单。 Fit在右边缘不是100％完美，但有些调整可以做得更好。一些CSS技巧应该有所帮助

Concept将文本放入屏幕外跨度，获取该跨度的宽度并与容器的宽度进行比较。这允许进行简单的em计算。

代码非常简单，因此不需要太多解释

演示：http://jsfiddle.net/KxjHC/2/

Answer 2

不知道你是否对jQuery插件感到满意，但如果是这样，这可能是一个不错的选择：

http://www.zachleat.com/web/bigtext-makes-text-big/

使用起来非常简单，这是项目页面的演示形式：http://jsfiddle.net/zachleat/WzN6d/

将您的HTML更改为：

<div class="Mainbox" style="width:400px;border:1px solid black">
    <div id="boxPreviewOne">This is line one</div>
    <div id="boxPreviewTwo">This is line two</div>
</div>

然后申请：

$('.Mainbox').bigtext();

这是您的代码的实际示例： http://jsfiddle.net/TqK4M/1/

Answer 3

我为用jquery标记这个而道歉，因为我不够熟练，无法真正实现你的答案。

我在这里找到了部分解决方案：Auto-size dynamic text to fill fixed size container

Answer 4

这应该或多或少地符合您的要求：

$(".linecontainer").each(function() {
    var maxWidth = $(this).width();
    var largestWidth = 0;
    var largestSpan;
    $(this).find("span")
        .each(function() {
            $(this).data("originalSize", parseInt($(this).css("font-size")));
            if ($(this).width() > largestWidth)
            {
                largestWidth = $(this).width();
                largestSpan = $(this);
            }
        });
    var largestSizeFound = false;
    var largestSize = 0;
    var sizeRatio;
    while (largestSizeFound == false && largestSize < 1000)
    {
        largestSize++;
        largestSpan.css("font-size", largestSize + "px");
        if (largestSpan.width() > largestSpan.parents(".linecontainer").width())
        {
            largestSize--;
            largestSizeFound = true;
            sizeRatio = largestSize / largestSpan.data("originalSize");
        }
    }
    $(this).find("span")
        .each(function() {
            $(this).css("font-size", parseInt(sizeRatio * $(this).data("originalSize")) + "px")
        })
});

HTML

<div class="linecontainer">
    <div><span class="lineone">this is the first line of text</span></div>
    <div><span class="linetwo">another line of text</span></div>
</div>

CSS

.linecontainer { width:250px; overflow:hidden; }
.linecontainer span { white-space:nowrap;  }
.lineone { font-size:20px; }
.linetwo { font-size:10px; }

http://jsfiddle.net/SZG7E/

将最宽的文本行调整为div并更改第二行以匹配比率

4 个答案: