Enforce the text inside the child div to perfectly fit within the parent container

Question

Enforce the text inside the child div to perfectly fit within the parent container

I have a challenge with two div elements in my HTML code as shown below:

<div id="parent">
    <div id="child">
        <p class="child-text"> ..... </p>
        <a class="child-link"> ..... </a>
        <p class="child-text"> ..... </p>
    </div>
</div>

#parent{ height: 400px; width:100px}

How can I make the contents of the #child div to fit vertically within the parent div? I am searching for a solution that will automatically resize the content of the child div based on its ID. I tried using jQuery.fittext, but it only works with the child-text class and not the entire child div. It seems like it doesn't have the intelligence to recognize the inner elements within the child div and adjust them accordingly.

Are there any other alternatives available for this task?

javascript jquery html css fittextjs

Answer 1

Answer №1

One possible solution could be implementing the following code snippet:

var fontSize = 10;
while($('#child').height() <= $('#parent').height()){
    fontSize++;
    $('#child').css('font-size', fontSize + 'px');
}

#parent{ height: 400px; width:100px;background:red;}
#child{padding-bottom:5px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="parent">
    <div id="child">
        <p class="child-text"> Once upon a time </p>
        <a class="child-link"> there lived a monkey</a>
        <p class="child-text"> who loved to eat oranges </p>
    </div>
</div>

The JavaScript code increases the font size of #child by 1 pixel each time its height is smaller than #parent. In the CSS, a bottom padding of 5px is applied to #child to prevent overflow.

`JSFiddle`

Answer 2

One possible solution could be implementing the following code snippet:

var fontSize = 10;
while($('#child').height() <= $('#parent').height()){
    fontSize++;
    $('#child').css('font-size', fontSize + 'px');
}

#parent{ height: 400px; width:100px;background:red;}
#child{padding-bottom:5px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="parent">
    <div id="child">
        <p class="child-text"> Once upon a time </p>
        <a class="child-link"> there lived a monkey</a>
        <p class="child-text"> who loved to eat oranges </p>
    </div>
</div>

The JavaScript code increases the font size of #child by 1 pixel each time its height is smaller than #parent. In the CSS, a bottom padding of 5px is applied to #child to prevent overflow.

`JSFiddle`

Answer 3

Answer №2

Include a table display property value for the #parent element and a table-cell display property value for the elements within #parent that you want to measure the height of.

#parent, #child {
  width: 100%;
  height: 100%;
  position: relative;
  display: table;
  }

.child-link, .child-text { /* Specify the ID/Class for the desired elements within #parent */
  display: inline-block;
  height: 100%;
  width: 150px;
  vertical-align: top;
  background-color: green;
  bottom: 0;
  display: table-cell;
  border-left: solid 5px white; /* For visual distinction */
  }

<div id="parent">
    <div id="child"><p class="child-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit. </p>
      
        <a class="child-link"> Lorem </a>
        <p class="child-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit.
      
       Lorem ipsum dolor sit amet...
      
       ...quisque sagittis felis nec est iaculis.</p>
    </div>
</div>

To make it responsive based on screen size, use the following approach:

@media screen and (max-width: 768px) { /* Modify as necessary */
enter code here

}

Answer 4

Include a table display property value for the #parent element and a table-cell display property value for the elements within #parent that you want to measure the height of.

#parent, #child {
  width: 100%;
  height: 100%;
  position: relative;
  display: table;
  }

.child-link, .child-text { /* Specify the ID/Class for the desired elements within #parent */
  display: inline-block;
  height: 100%;
  width: 150px;
  vertical-align: top;
  background-color: green;
  bottom: 0;
  display: table-cell;
  border-left: solid 5px white; /* For visual distinction */
  }

<div id="parent">
    <div id="child"><p class="child-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit. </p>
      
        <a class="child-link"> Lorem </a>
        <p class="child-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit.
      
       Lorem ipsum dolor sit amet...
      
       ...quisque sagittis felis nec est iaculis.</p>
    </div>
</div>

To make it responsive based on screen size, use the following approach:

@media screen and (max-width: 768px) { /* Modify as necessary */
enter code here

}

Enforce the text inside the child div to perfectly fit within the parent container

Answer №1

`JSFiddle`

Answer №2

Similar questions

Calculate the worth of a specific item within an array of objects and save the outcome as a new attribute

Check if an object is already in an array before pushing it in: JavaScript

Attempting to add text one letter at a time

Using JavaScript promises to handle connection pooling and query execution

How can I display the data successfully returned from a Laravel jQuery Ajax call in my view?

Executing the algorithm through a Node HTTP request results in a significant increase in processing time

Preserve the content in an input text field within ASP.NET

Issues with AngularJS edit functionality for records not functioning as expected

How to Arrange Multiple Divs in a CSS Grid Layout without Using Floats

Designing a dropdown menu using CSS

What could be causing my select tags to appear incorrectly in Firefox and IE?

CSS division nested within the center float division

Concentrate on implementing Cross-domain Ajax functionality in Opera browser

When the <li> element is clicked, jQuery will fade it out

Clicking within the text activates the dropdown menu, but clicking outside the text does not

Unable to retrieve button value through ajax call

What is the best way to prompt users to submit comments with a popup textarea box?

HTML/CSS border tiling (left, bottom, right)

Is requesting transclusion in an Angular directive necessary?

Empty text box