我带着一个棘手的问题来找你:
想象一下,你有以下基本结构:
<div><p>hello</p></div>
现在假设div有display:block; and width:200px;
。
使用javascript,你会如何检查哪个字体大小给你一个尽可能大的'你好'而没有水平溢出(在一个单词的情况下)或者在一个句子或一组单词的情况下跳到第二行?
我想不出一种方法来测量文本所占用的空间,以便可以检查它与父容器的空间,更不用说检查元素是否溢出或跳转。
如果有办法,我相信这是正确的问题。
答案 0 :(得分:4)
答案 1 :(得分:2)
可能有一种方法并不那么疯狂,但这应该尽可能准确。基本上,您有一个div用于测量其宽度,并逐渐增加文本内容,直到它超过目标div的宽度。然后,将目标div的<p>
字体大小更改为测量div的减1:
http://jsfiddle.net/ExplosionPIlls/VUfAw/
var $measurer = $("<div>").css({
position: 'fixed',
top: '100%'
}).attr('id', 'measurer');
$measurer.append($("<p>").text($("p").text()));
$measurer.appendTo("body");
while ($measurer.width() <= $("#content").width()) {
$("#measurer p").css('font-size', '+=1px');
console.log($("#measurer").width());
}
$("#measurer p").css('font-size', '-=1px');
$("#content p").css('font-size', $("#measurer p").css('font-size'));
$measurer.remove();
答案 2 :(得分:1)
将p
的样式设置为display: inline
,然后运行此
var dWidth = $("div").width();
var pWidth = $("p").width();
var starting = 1;
while (pWidth < dWidth) {
$("p").css("font-size",starting+"em");
pWidth = $("p").width();
starting = starting + .1;
}
答案 3 :(得分:0)
试试这个:
Auto-size dynamic text to fill fixed size container
(function($) {
$.fn.textfill = function(options) {
var fontSize = options.maxFontPixels;
var ourText = $('span:visible:first', this);
var maxHeight = $(this).height();
var maxWidth = $(this).width();
var textHeight;
var textWidth;
do {
ourText.css('font-size', fontSize);
textHeight = ourText.height();
textWidth = ourText.width();
fontSize = fontSize - 1;
} while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
return this;
}
})(jQuery);
$(document).ready(function() {
$('.jtextfill').textfill({ maxFontPixels: 36 });
});
<div class='jtextfill' style='width:100px;height:50px;'>
<span>My Text Here</span>
</div>
答案 4 :(得分:0)
new jsFiddle Demo (已更新 2013年3月22日)
我会不断增加字体大小,直到clientWidth或clientHeight发生变化。但是,当使用实际元素本身时,这变得不可靠。为了处理这种情况,可以动态创建跨度,然后监控跨度的尺寸,以便正确保留实际元素的原始尺寸。
JS
var adjuster = document.getElementById("adjust");
adjuster.onclick = function(){
var p = document.getElementById("p");
var text = p.innerText;
var s = document.createElement("span");
s.innerText = text;
p.innerHTML = "";
p.appendChild(s);
var h = p.clientHeight;
var w = p.clientWidth;
var size = 10;
while(true){
size++;
s.style.fontSize = size + "px";
if($(s).height() > h || $(s).width() > w){
size-=2;//rollback to no height change
s.style.fontSize = size + "px";
break;
}
}
p.style.fontSize = s.style.fontSize;
p.removeChild(s);
p.innerText = text;
};