Brownman Revival Brownman Revival - 5 months ago 6
Javascript Question

Reduce the font size of span text when two lines



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>





AIM:

Reduce the font size of span when two lines to make it one line. (Telephone Number span)

Found this post and copied the solution but when i implement it, it is reducing the font size infinitely i guess because the browser stops.

I commented the while loop to make the browser not hang. I even added an if statement but it no help

Answer

you should try white-space property

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