Achieve a Dynamic Font Style Inside the Parent Div's Border

Question

Achieve a Dynamic Font Style Inside the Parent Div's Border

Here is an example of an HTML element:

<div id="myid_templates_preview_text_1" style="transform: rotate(0deg); border: 1px solid rgb(0, 0, 0); position: absolute; left: 64.5px; top: 144.984px; width: 117px; height: 42px; z-index: 1;">
    <p>
        <span style="color: #000000; font-size: large;">Sample Very Very Long Line Of Text.</span>
    </p>
</div>

Shown below is the output:

https://i.sstatic.net/y4YCK.png

I would like to adjust the text font size so it does not go beyond the borders of the div. How can I achieve this?

UPDATE 1:

I am currently working on a layout designer application and therefore cannot modify the HTML structure provided above. The user dynamically designs the HTML content. Below is another example of HTML structure.

<div id="myid_templates_preview_text_2" style="transform: rotate(0deg); border: 1px solid rgb(0, 0, 0); position: absolute; left: 62px; top: 84px; width: 87px; height: 97px; z-index: 1;">
    <p style="text-align: center;">
       <span style="font-size: medium;">
           <strong>Sample Very Very Long Line Of Text.</strong>
       </span>
    </p>
    <p style="text-align: center;">
        <span style="font-size: small;">
            <strong>Sample Very Very Long Line Of Text.</strong>
        </span>
    </p>
</div>

https://i.sstatic.net/V9jOk.png

javascript css

Answer 1

Answer №1

One option, although not the most efficient or ideal method, is to iteratively adjust the font size until it fits within the designated space. I have made some slight modifications to your code for better readability:

#myid_templates_preview_text_1{
  transform: rotate(0deg); 
  border: 1px solid rgb(0, 0, 0); 
  position: absolute; 
  left: 64.5px; 
  top: 144.984px; 
  width: 117px; 
  height: 42px; 
  z-index: 1;
}

#myid_templates_preview_text_1 span{
  color: #000000; 
  font-size: large;
}

.

<div id="myid_templates_preview_text_1">
    <span>Sample Very Very Long Line Of Text.</span>
</div>

Here is the revised code segment:

function adjustTextSize(){
    var wrapper = $('#myid_templates_preview_text_1');
    var containerHeight = wrapper.height(); 
    var textElement = wrapper.find('span').first();
    var textHeight = textElement.height();

    if (textHeight > containerHeight){
        // Text still too big
        var fontSize = parseInt(textElement.css('font-size'));
        if (isNaN(fontSize)) fontSize = 32; 
        fontSize--;
        textElement.css('font-size',fontSize);
        adjustTextSize(); 
    }
}

$(function(){
    adjustTextSize();
});

View the working jsfiddle here: https://jsfiddle.net/8boxt0xk/

UPDATE 1:

If you are unable to modify the markup, you can use this updated function that resizes fonts while maintaining proportions. It is recommended to add margin: 0 to your p tags for a better fit within the div:

function adjustTextSize(){
    var wrapper = $('#myid_templates_preview_text_2');
    var containerHeight = wrapper.height();
    var totalTextHeight = 0;

    wrapper.find('p').each(function(){
        totalTextHeight += $(this).height();
    });

    console.log(containerHeight, totalTextHeight);
    if (totalTextHeight > containerHeight){
        // Text overflow
        wrapper.find('span').each(function(){
           var element = $(this);
           var currentFontSize = parseInt(element.css('font-size'));
           if (isNaN(currentFontSize)) currentFontSize = 28;
           currentFontSize--;
           element.css('font-size', currentFontSize);
        });
        debugger;
        adjustTextSize();  
    }
}

Updated jsfiddle: https://jsfiddle.net/8boxt0xk/2/

Answer 2

One option, although not the most efficient or ideal method, is to iteratively adjust the font size until it fits within the designated space. I have made some slight modifications to your code for better readability:

#myid_templates_preview_text_1{
  transform: rotate(0deg); 
  border: 1px solid rgb(0, 0, 0); 
  position: absolute; 
  left: 64.5px; 
  top: 144.984px; 
  width: 117px; 
  height: 42px; 
  z-index: 1;
}

#myid_templates_preview_text_1 span{
  color: #000000; 
  font-size: large;
}

.

<div id="myid_templates_preview_text_1">
    <span>Sample Very Very Long Line Of Text.</span>
</div>

Here is the revised code segment:

function adjustTextSize(){
    var wrapper = $('#myid_templates_preview_text_1');
    var containerHeight = wrapper.height(); 
    var textElement = wrapper.find('span').first();
    var textHeight = textElement.height();

    if (textHeight > containerHeight){
        // Text still too big
        var fontSize = parseInt(textElement.css('font-size'));
        if (isNaN(fontSize)) fontSize = 32; 
        fontSize--;
        textElement.css('font-size',fontSize);
        adjustTextSize(); 
    }
}

$(function(){
    adjustTextSize();
});

View the working jsfiddle here: https://jsfiddle.net/8boxt0xk/

UPDATE 1:

If you are unable to modify the markup, you can use this updated function that resizes fonts while maintaining proportions. It is recommended to add margin: 0 to your p tags for a better fit within the div:

function adjustTextSize(){
    var wrapper = $('#myid_templates_preview_text_2');
    var containerHeight = wrapper.height();
    var totalTextHeight = 0;

    wrapper.find('p').each(function(){
        totalTextHeight += $(this).height();
    });

    console.log(containerHeight, totalTextHeight);
    if (totalTextHeight > containerHeight){
        // Text overflow
        wrapper.find('span').each(function(){
           var element = $(this);
           var currentFontSize = parseInt(element.css('font-size'));
           if (isNaN(currentFontSize)) currentFontSize = 28;
           currentFontSize--;
           element.css('font-size', currentFontSize);
        });
        debugger;
        adjustTextSize();  
    }
}

Updated jsfiddle: https://jsfiddle.net/8boxt0xk/2/

Answer 3

Answer №2

Simply make adjustments to the width and height:

<div id="myid_templates_preview_text_1" style="transform: rotate(0deg); border: 1px solid rgb(0, 0, 0); position: absolute; left: 64.5px; top: 144.984px; width: 117px; height: 80px; z-index: 1;">
    <p>
        <span style="color: #000000; font-size: large;">Example Very Long Line Of Text.</span>
    </p>
</div>

Answer 4

Simply make adjustments to the width and height:

<div id="myid_templates_preview_text_1" style="transform: rotate(0deg); border: 1px solid rgb(0, 0, 0); position: absolute; left: 64.5px; top: 144.984px; width: 117px; height: 80px; z-index: 1;">
    <p>
        <span style="color: #000000; font-size: large;">Example Very Long Line Of Text.</span>
    </p>
</div>

Achieve a Dynamic Font Style Inside the Parent Div's Border

Answer №1

Answer №2

Similar questions

Attempting to execute a PHP script through a JavaScript if statement

Creating a variable name from a string using a function

Here is a step-by-step guide on creating a navigation bar with a Login and Sign Up button using Bootstrap 4

What is the technique for integrating a required file into an Angular module using Browserify?

Struggling to apply the active class using a combination of jquery, nodejs, express, and bootstrap

Create a duplicate of the sapUI5 JSON model and end the data binding process

Should I consider implementing Flexbox even if I need to cater to users still using IE9?

Could PHP possibly recall colors?

Extract ID for Bootstrap modal display

Unresolved issue with AngularJS radio button binding

Using JavaScript to enhance and highlight specific items in a dropdown menu

Accessing data from a CD-ROM or DVD through a web browser

There is no Api.js file in the Cordova iOS platform

As I go through the database, I notice that my div model functions correctly for the initial record but does not work for any subsequent ones

Enhance the performance of ng-class in AngularJS when using ng-repeat with large datasets

Is it possible to apply a CSS transition to a div when hovering over a specific area of the

Browsing through different backdrop visuals

manipulating and ordering JSON array objects in JavaScript

It is impossible for Javascript to access an element that has been loaded using

Adjusting a NodeJS module for easier integration into codebases