Adjust the size of various texts to fit the width of the container

Question

Adjust the size of various texts to fit the width of the container

I have a unique challenge with resizing text to fit within specific elements. The texts may vary in length and I want to ensure that the longest line fits perfectly within the container's width.

For example, consider this code snippet:

.container {
  width: 400px;
  border: 1px solid green;
  padding: .5em;
}

.container>div {
  border: 1px dotted gray;
}

<div class="container">
  <div>Lorem ipsum dolor sit amet.</div>
  <div>Lorem ipsum.</div>
  <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br />sed diam nonumy eirmod tempor invidunt<br />ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>

This should ideally result in something like this:

https://i.sstatic.net/vPtep.jpg

I've explored using relative font sizing units without success, as manually adjusting the font-size for each child element is not feasible. Additionally, solutions for dynamically scaling text based on viewport size don't apply here due to varying text lengths.

Is there a CSS solution to this problem, or would a JavaScript approach be more appropriate? Considering the complexity of fonts with varying letter sizes, finding a suitable method is crucial.

javascript html css font-size

Answer 1

Answer №1

How about this?

$(document).ready(function() {
  var divEls = $('.container div');
  for(var i=0; i<divEls.length;i++){
    var span = $(divEls[i]).find('span');
    var fontSize = 16;
    while (span.width() < $(divEls[i]).width()) {
      span.css('font-size', fontSize++)
    }
    // wrap if span exceeds div width
    if (span.width() > $(divEls[i]).width()) {
      span.css('white-space', 'pre-wrap');
    }  
  }
  
});

.container {
  width: 400px;
  border: 1px solid green;
  padding: .5em;
}

.container>div {
  border: 1px dotted gray;
  white-space: pre;
}

<div class="container">
  <div><span>Lorem ipsum dolor sit amet.</span></div>
  <div><span>Lorem ipsum.</span></div>
  <div><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br />sed diam nonumy eirmod tempor invidunt<br />ut labore et dolore magna aliquyam erat, sed diam voluptua .</span></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can also try an ES6 solution like this CodePen Demo

Update - per the comment below, here is a reponsive solution (also see this CodePen Demo):

function resizeFont() {
  var divEls = $(".container div");
  for (var i = 0; i < divEls.length; i++) {
    var span = $(divEls[i]).find("span");
    var fontSize = (span.css("font-size").match(/\d+/)[0]);
    while (span.width() < $(divEls[i]).width()) {
      span.css("font-size", fontSize++);
    }
    while (span.width() > $(divEls[i]).width()) {
      span.css("font-size", fontSize--);
    }
  }
}

$(document).ready(function() {
  resizeFont();
  $(window).on("resize", resizeFont);
});

body {
  margin: 0;
}

.container {
  max-width: 100vw;
  border: 1px solid green;
  padding: .5em;
}

.container>div {
  border: 1px dotted gray;
  white-space: pre;
}

<div class="container">
  <div><span>Lorem ipsum dolor sit amet.</span></div>
  <div><span>Lorem ipsum.</span></div>
  <div><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br />sed diam nonumy eirmod tempor invidunt<br />ut labore et dolore magna aliquyam erat, sed diam voluptua .</span></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

How about this?

$(document).ready(function() {
  var divEls = $('.container div');
  for(var i=0; i<divEls.length;i++){
    var span = $(divEls[i]).find('span');
    var fontSize = 16;
    while (span.width() < $(divEls[i]).width()) {
      span.css('font-size', fontSize++)
    }
    // wrap if span exceeds div width
    if (span.width() > $(divEls[i]).width()) {
      span.css('white-space', 'pre-wrap');
    }  
  }
  
});

.container {
  width: 400px;
  border: 1px solid green;
  padding: .5em;
}

.container>div {
  border: 1px dotted gray;
  white-space: pre;
}

<div class="container">
  <div><span>Lorem ipsum dolor sit amet.</span></div>
  <div><span>Lorem ipsum.</span></div>
  <div><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br />sed diam nonumy eirmod tempor invidunt<br />ut labore et dolore magna aliquyam erat, sed diam voluptua .</span></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can also try an ES6 solution like this CodePen Demo

Update - per the comment below, here is a reponsive solution (also see this CodePen Demo):

function resizeFont() {
  var divEls = $(".container div");
  for (var i = 0; i < divEls.length; i++) {
    var span = $(divEls[i]).find("span");
    var fontSize = (span.css("font-size").match(/\d+/)[0]);
    while (span.width() < $(divEls[i]).width()) {
      span.css("font-size", fontSize++);
    }
    while (span.width() > $(divEls[i]).width()) {
      span.css("font-size", fontSize--);
    }
  }
}

$(document).ready(function() {
  resizeFont();
  $(window).on("resize", resizeFont);
});

body {
  margin: 0;
}

.container {
  max-width: 100vw;
  border: 1px solid green;
  padding: .5em;
}

.container>div {
  border: 1px dotted gray;
  white-space: pre;
}

<div class="container">
  <div><span>Lorem ipsum dolor sit amet.</span></div>
  <div><span>Lorem ipsum.</span></div>
  <div><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br />sed diam nonumy eirmod tempor invidunt<br />ut labore et dolore magna aliquyam erat, sed diam voluptua .</span></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Adjust the size of various texts to fit the width of the container

Answer №1

Similar questions

React and Redux are throwing an error stating that actions must be simple objects. For any asynchronous actions, it is recommended to utilize

Tips for creating JSON using AngularJs to store tabular information

Encountering a typescript error: Attempting to access [key] in an unsafe manner on an object of

Track changes and save only the updated elements in an array

The CSS Scroll-Snapping feature seems to be overlooking one specific element that it should be snapping to

Updating parameter value upon the execution of an internal function in Javascript

Steps to vertically shift an image downwards within a navigation bar using HTML and CSS

CSS hover effect: altering background colors of both parent and child elements simultaneously

The React Navbar dropdown items appear to be displaying only text, without any menu showing up behind

Tips on displaying a progress bar with a percentage for a form submission containing a sizeable base64 encoded image

What are the steps to achieve such a design?

Limit the number of elements in an Angular object by using the filter function

What differences occur in JavaScript when the IE Developers Tools are accessed?

What is a different way to rearrange items within an Angular Controller without relying on orderBy in the HTML?

JavaScript XML Serialization: Transforming Data into Strings

Having difficulty uploading files to my website [PHP]

Arranging elements within a complex div structure

``There seems to be an issue with VueJs v-for loop not updating

Combining the elements within an array of integers

"Headers cannot be set once they have been sent to the client... Error handling for unhandled promise rejection