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.
我从我的数据库加载信息,我把它放在绿色框内(图像中)。如果文本不适合绿框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;
}
1 个解决方案
#1
4
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.
我在父div上设置宽度和最小高度,并将文本内部包含在span标记中。这允许div与文本垂直拉伸。我检查div的高度并减小字体大小,直到div达到最小高度CSS值。
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
. -.-
这解决了文本高度和包装问题。接下来,我们需要处理长溢出的单词...为此,我检查每个div内的每个跨度并缩小div中所有跨度的文本,如果任何跨度比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.
以这种方式使用while循环,我认为有必要包含循环限制器,如果出现问题,将div背景更改为红色。
Fiddle: https://jsfiddle.net/96tccod8/
小提琴: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>
#1
4
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.
我在父div上设置宽度和最小高度,并将文本内部包含在span标记中。这允许div与文本垂直拉伸。我检查div的高度并减小字体大小,直到div达到最小高度CSS值。
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
. -.-
这解决了文本高度和包装问题。接下来,我们需要处理长溢出的单词...为此,我检查每个div内的每个跨度并缩小div中所有跨度的文本,如果任何跨度比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.
以这种方式使用while循环,我认为有必要包含循环限制器,如果出现问题,将div背景更改为红色。
Fiddle: https://jsfiddle.net/96tccod8/
小提琴: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>