【发布时间】：2016-11-03 09:08:02
【问题描述】：
var divWidth = parseInt($("#printtdtelno").closest('td').height());
var text = parseInt($("#printtdtelno").height());
var fontSize = parseInt($("#printtdtelno").css("font-size"));
console.log('span height ' + parseInt($("#printtdtelno").height()))
console.log('span width ' + parseInt($("#printtdtelno").width()))
console.log('td height ' + parseInt($("#printtdtelno").closest('td .wrapper').height()))
console.log('td width ' + parseInt($("#printtdtelno").closest('td .wrapper').width()))
console.log(text > divWidth)
//while (text > divWidth) {
if (text == divWidth) {
$("#printtdtelno").css("font-size", fontSize -= 0.5);
console.log(fontSize -= 0.5)
}
//}body{
height:auto;
width:1100px;
margin:0;
padding:0;
margin-left: auto;
margin-right: auto;
//background-color:#000;
}
.wrapper {
position: relative;
}
.wrapper .underline:not(#octtext):not(#tcttext):not(#cloatext) {
position: absolute;
//text-transform: uppercase;
right: 0;
}
span.underline {
font-size: 18.5px;
border-bottom: 1px solid #000000;
text-align: center;
min-height: 24px;
}
/*span.appraise1 {
text-align: center;
}*/
span#printtdtdno{
display:inline-block;
width: 87%;
}
span.taxdecrow1{
display:inline-block;
width: 55%;
}
span.taxdecrow2{
display:inline-block;
width: 90%;
}
span.taxdecrow3{
display:inline-block;
width: 90%;
}
span.taxdecrow3phone{
display:inline-block;
width: 60%;
}
span.taxdecrow4{
display:inline-block;
width: 65%;
}
span#printtdadmintin{
display:inline-block;
width: 90%;
}
span.taxdecrow5{
display:inline-block;
width: 65%;
}
span.taxdecrow6{
display:inline-block;
width: 80%;
}
span#printtdsurvey{
display:inline-block;
width: 80%;
}
span.underline1{
font-size: 20px;
//border-bottom: 1px solid #000000;
text-align: center;
text-decoration: underline;
}
span.underline1:empty{
display:inline-block;
border-bottom: 1px solid #000000;
min-width:90%;
}
.memo {
background: repeating-linear-gradient(to bottom, transparent 0, transparent 18px, #000 20px, #000 21px);
background-attachment: local;
display: inline-block;
width: 100%;
min-height: 84px;
font-size: 14px;
line-height: 1.5;
font-family: Tahoma, sans-serif;
}
.memo:empty{
background: repeating-linear-gradient(to bottom, transparent 0, transparent 18px, #000 20px, #000 21px);
background-attachment: local;
display: inline-block;
width: 100%;
min-height: 102px;
font-size: 14px;
line-height: 1.5;
font-family: Tahoma, sans-serif;
}
/*.memo {
min-height: 85px;
width:100%;
display: inline-block;
line-height: 21px;
text-align: justify;
background: url("../images/lines.png") repeat;
}
.memo:empty {
min-height: 85px;
width:100%;
display: inline-block;
line-height: 21px;
background: url("../images/lines.png") repeat;
}*/
table{
margin-top: 0;
height:auto;
width:1050px;
font-size: 18.5px;
}
table td{
height: 25px;
}
.appraise {
margin: 0px;
display:inline-block;
min-width: 150px;
}
.appraise1 {
margin: 0px;
display:inline-block;
min-width: 100px;
border-bottom: 1px solid #000000;
}
.appraise11 {
margin: 0px;
display:inline-block;
}
#pmemo{
text-decoration: underline;
}
#spanunderline{
width:1050px;
}
.rightborderonly{
border-right: 1px solid black;
}
.annotate {
display:inline-block;
vertical-align:top
}
.annotate .note {
display:block;
font-size:smaller;
font-style:italic;
text-align: center;
}
#headeroftaxdec{
margin-top: 27px;
}
#headeroftaxdec h2{
margin: 0;
}
#headeroftaxdec span:nth-child(1){
float: left;
font-size: smaller;
}
#headeroftaxdec span{
display: inline-block;
}
#headeroftaxdec{
text-align: center;
width: 100%;
}
#propertykindtaxdec{
font-size: x-large;
font-weight: bold;
}
.amountinwords{
white-space: nowrap
}
.amountinwords span.inline{
display: inline-block;
}
#printtdassessedvalwords{
border-bottom: 1px solid #000000;
}
.tablewithpadding td{
padding-left: 70px;
padding-right: 70px;
}
.allcaps{
/* text-transform: uppercase;*/
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="0">
<tbody>
<tr>
<td width="70%">
<div class="wrapper">
Owner:<span type="text" id="printtdowner" class=" underline taxdecrow2"></span>
</div>
</td>
<td width="30%">
<div class="wrapper">
TIN:<span type="text" id="printtdtin" class=" underline taxdecrow2"></span>
</div>
</td>
</tr>
<tr>
<td>
<div class="wrapper">
Address: <span type="text" id="printtdaddress" class="underline taxdecrow3"></span>
</div>
</td>
<td>
<div class="wrapper">
Telephone No. <span type="text" id="printtdtelno" class="underline taxdecrow3phone">291-894-351 / 902-910-908</span>
</div>
</td>
</tr>
<tr>
<td width="70%">
<div class="wrapper">
Administrator/Beneficial User: <span type="text" id="printtdadministrator" class=" underline taxdecrow4"></span>
</div>
</td>
<td width="30%">
<div class="wrapper">
TIN:<span type="text" id="printtdadmintin" class=" underline taxdecrow4"></span>
</div>
</td>
</tr>
<tr>
<td>
<div class="wrapper">
Address: <span type="text" id="printtdadminaddress" class=" underline taxdecrow3"></span>
</div>
</td>
<td>
<div class="wrapper">
Telephone No. <span type="text" id="printtdadmintel" class=" underline taxdecrow3phone"> </span>
</div>
</td>
</tr>
</tbody>
</table>目标：
两行时将span的字体缩小为一行。 （电话号码跨度）
找到this 发布并复制了解决方案，但是当我实施它时，我猜它会无限减小字体大小，因为浏览器停止了。
我注释了 while 循环以使浏览器不会挂起。我什至添加了一个 if 语句，但它没有帮助
【问题讨论】：
标签： javascript jquery html css fonts