我从我的数据库加载信息,我把它放在绿色框内(图像中)。 如果文本不适合绿框div,因为它太长,我怎样才能使用javascript调整文本大小? 此外,文字可以在多行上,而不仅仅是1.我在网上看到了很多答案,但最让我的绿箱div的位置和大小搞得一团糟。 我应该提一下,如果文本已经恰当地适合div,我不想缩小它。 我希望它有默认大小。
.shortDescriptionContainer { width:322px; height:60px; font-size:3em; background-color:green; float:left; margin-left:15px; margin-top:10px; text-align:center; overflow: hidden; }
I load information from my database which I put inside of the green boxes (in image). If the text will not properly fit the green box div because it is too long, how can I resize the text using javascript? Also the text can be on multiple lines, not just on 1. I have seen many answers online but most mess up the positioning and size of my green box div. I should mention that if the text does properly fit in the div already, I do not want to shrink it. I want it to have its default size.
.shortDescriptionContainer { width:322px; height:60px; font-size:3em; background-color:green; float:left; margin-left:15px; margin-top:10px; text-align:center; overflow: hidden; }最满意答案
这是一个解决方案。 它有两个迭代允许文本换行并防止长字溢出...
我在父div上设置width和min-height ,并将文本内部包含在span标记中。 这允许div与文本垂直拉伸。 我检查div的高度并减小字体大小,直到div达到min-height CSS值。
这解决了文本高度和包装问题。 接下来,我们需要处理长溢出的单词...为此,我检查每个span内的每个span并缩小div中所有spans文本,如果任何span比div宽。 -.-
以这种方式使用while循环,我认为有必要包含循环限制器,如果出现问题,将div背景更改为红色。
小提琴: https : //jsfiddle.net/96tccod8/
$(function() { $('.fit-text').each(function() { // Fit height var fitHeight = parseInt($(this).css('min-height')); if ($(this).height() > fitHeight) { var c = 0; while ($(this).height() > fitHeight) { $(this).find('span').each(function() { var fontSize = parseInt($(this).css('font-size')); fontSize = fontSize - 1 + "px"; $(this).css('font-size', fontSize); }); c++; if (c > 999) { $(this).css('background', 'red'); break; } } } // Fit width var fitWidth = parseInt($(this).css('width')); var $div = $(this); $(this).find('span').each(function() { var c = 0; var spanWidth = parseInt($(this).width()); while (fitWidth < spanWidth) { $div.find('span').each(function() { var fontSize = parseInt($(this).css('font-size')); fontSize = fontSize - 1 + "px"; $(this).css('font-size', fontSize); }); spanWidth = parseInt($(this).width()); c++; if (c > 999) { $div.css('background', 'red'); break; } } }); }); });.fit-text { display: block; float: left; /* width and min-height values are important */ width: 240px; min-height: 50px; background: darkgreen; margin: 10px; } .fit-text span { font-family: sans-serif; font-weight: bold; font-size: 40px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="fit-text"> <span>TEST</span> </div> <div class="fit-text"> <span>SUPERMEGAMANXZERO</span> </div> <div class="fit-text"> <span>TEST TEST </span> <span>SECONDSPANLONGWORD</span> </div> <div class="fit-text"> <span>TEST TEST TEST</span> </div> <div class="fit-text"> <span>TEST TEST TEST TEST TEST</span> </div> <div class="fit-text"> <span>TEST TEST TEST TEST TEST TEST TEST TEST</span> </div>Here is one solution. It has two iterations to allow text to wrap and to prevent long words from overflowing...
I set width and min-height on the parent div, and wrap the text inside in a span tag. This allows the div to stretch vertically with the text. I check the height of the div and reduce the font size until the div reaches the min-height CSS value.
That solves the text height and wrapping. Next, we need to handle long overflowing words... For that, I check each span inside each div and shrink text of all spans within the div if any span is wider than the div. -.-
Using while loops in this way, I felt it necessary to include loop limiters that will change the div backgrounds to red if there is a problem.
Fiddle: https://jsfiddle.net/96tccod8/
$(function() { $('.fit-text').each(function() { // Fit height var fitHeight = parseInt($(this).css('min-height')); if ($(this).height() > fitHeight) { var c = 0; while ($(this).height() > fitHeight) { $(this).find('span').each(function() { var fontSize = parseInt($(this).css('font-size')); fontSize = fontSize - 1 + "px"; $(this).css('font-size', fontSize); }); c++; if (c > 999) { $(this).css('background', 'red'); break; } } } // Fit width var fitWidth = parseInt($(this).css('width')); var $div = $(this); $(this).find('span').each(function() { var c = 0; var spanWidth = parseInt($(this).width()); while (fitWidth < spanWidth) { $div.find('span').each(function() { var fontSize = parseInt($(this).css('font-size')); fontSize = fontSize - 1 + "px"; $(this).css('font-size', fontSize); }); spanWidth = parseInt($(this).width()); c++; if (c > 999) { $div.css('background', 'red'); break; } } }); }); });.fit-text { display: block; float: left; /* width and min-height values are important */ width: 240px; min-height: 50px; background: darkgreen; margin: 10px; } .fit-text span { font-family: sans-serif; font-weight: bold; font-size: 40px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="fit-text"> <span>TEST</span> </div> <div class="fit-text"> <span>SUPERMEGAMANXZERO</span> </div> <div class="fit-text"> <span>TEST TEST </span> <span>SECONDSPANLONGWORD</span> </div> <div class="fit-text"> <span>TEST TEST TEST</span> </div> <div class="fit-text"> <span>TEST TEST TEST TEST TEST</span> </div> <div class="fit-text"> <span>TEST TEST TEST TEST TEST TEST TEST TEST</span> </div>
更多推荐
发布评论