1

我的想法是让一个 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>

这是代码的示例图像+概念场景的图像：
在此处输入图像描述

在此处输入图像描述

恐怕我只能靠自己了。
显然还有很长的路要走。

  1. 我宁愿只将文本输入镜像一次，但我认为不可能找到最宽的线。
  2. 我不知道如何获得我所谓的“MAX_FONT_SIZE”
4

4 回答 4

0

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

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

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

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

于 2012-10-14T20:30:40.257 回答
0

不知道您是否对 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/

于 2012-10-14T21:04:21.307 回答
0

我很抱歉用 jquery 标记这个，因为我不够熟练，无法实际实现你的答案。

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

于 2012-10-14T21:52:51.260 回答
0

这应该或多或少地满足您的要求：

$(".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/

于 2012-10-14T23:14:04.737 回答