javascript - 两行时减小跨度文本的字体大小

Question

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 语句，但它没有帮助

Answer 1

你应该试试 white-space 属性

.wrapper span{ white-space: nowrap;}

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;*/
}
.wrapper span{ white-space: nowrap;}

<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>