Strategies for adjusting text size to fit within a resizable div container

I'm facing an issue with a resizable div that has text inside. When I resize the div, the last line of the text goes beyond the boundaries of the div. How can I ensure that all the text fits within the resizable div while maintaining the appropriate font size?

Check out this sample code:


resize: function(e, ui) 
{
    var newDiagonal = getContentDiagonal();
    var ratio = newDiagonal / initDiagonal;

    $("#content").css("font-size", initFontSize + ratio * 3);
}

The image below illustrates the problem:

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

You can find the code here on Jsfiddle..!

jquerycssjquery-uiresizefont-size

Answer №1

It's actually very straightforward. As I observed in your fiddle, you included the following code:

#content { font-size: 16; overflow: hidden; }

Instead of just applying the overflow to the css for #content, I made a slight adjustment and it successfully worked for both the widget header and content sections:

#resizeable { width: 150px; height: 150px; overflow: hidden; }

Just a quick note, for overflow to function correctly, you need a block level element—like the div element you're using by default—and also specify a height value, which you've already done. Does this explanation address your query?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Angular JS to Manage Controller Events

I am currently working on an application that requires saving a large amount of data in cascade, similar to a typical master-detail view. Within this view, there is a "Save All" Button which saves each row in an iteration. This process triggers jQuery cus ...

javascriptjqueryangularjsjquery-events

Accessing Element Content Without Identifiers in JavaScript

http://jsfiddle.net/n253R/3/ Make sure to check the link above. I'm looking to change the color of numbers based on their value. This needs to be applied to multiple numbers within different Wordpress posts. Currently, I am only able to affect one n ...

javascriptjquerygetelementbyidgetelementsbyclassname

How to apply an icon image using the background property in CSS in Vue 3

Need help setting background image from the public folder |_public | |_images | |_icon.png |_src |_components |_TheHeader.vue I'm having difficulty trying to set an image as a background in TheHeader.vue using CSS, but the image is located in ...

cssvue.jsvuejs3

I am having difficulty centering the contents on the page horizontally

Struggling to achieve horizontal alignment, I suspect the floats are causing issues. Removing them disrupts the layout with left_wrap and right_wrap not staying next to each other. Check out this example on JSFiddle .main_wrap {width:100%;} .main_wrap_2 ...

htmlcss

Is it possible for me to overlap a text over hidden text, and if the hidden text becomes visible through JavaScript, my text will shift to the right of the now visible hidden text?

I'm currently working on a website for a company that requires users to complete all the information before proceeding. To achieve this, I created a form with the following code: <form action="Owners Infoback.php" onsubmit="return validateFo ...

javascripthtmlcss

Using JQuery to automatically scroll and anchor to the bottom of a dynamically populated div, but only if the user doesn't

I am attempting to achieve the functionality of automatically scrolling to the bottom of a div with the ID #chat-feed. The overflow for this div is set to auto, and I want it to remain at the bottom unless a user manually scrolls up. If they do scroll up, ...

javascriptjqueryhtmlajax

Using jQuery's each method to implement dynamic fallback with JSON data

Is it possible to set a fallback function dynamically from an AJAX JSONP call? I've been trying, but it doesn't seem to work. I'm not sure if I'm doing it right. Here's what I have: var GetFacebookData = function (data) { ...

javascriptjqueryjsonajaxjsonp

notification that appears when checkbox is ticked

If a certain delivery option is selected during the checkout process on our website, we would like to trigger a popup box displaying a custom message. Here is the specific checkbox for that delivery option: <input id="delivery_option_22_6" class="deliv ...

javascriptjqueryhtml

Updating the Facebook Comment Plugin with Jquery once it has finished loading

My goal is to populate the TextArea of a Facebook Comment Plugin so that my text is displayed inside it once it loads. The HTML code for the comment section includes: <div class="fb-comments facebook" data-href="https://www.facebook.com/RighToDignity" ...

jqueryfacebookfacebook-comments

Exploring the integration of AJAX callbacks with ASP.NET User controls

What is the most effective approach for integrating user controls that require AJAX callbacks? My objectives include: Utilizing browser events (such as drag and drop) to trigger an AJAX notification that can initiate a control event, allowing the code o ...

asp.netjqueryajax

The Google Share button may fail to be displayed correctly if it was initially hidden

Is there a solution to the issue where the Google Share button does not display properly when it is initially hidden using CSS display:none on its parent div and then shown using jQuery .show()? I am currently experiencing this problem and I'm unsure ...

jquerycssgoogle-plus

Can a script be dynamically loaded into a div while accessing local variables?

Consider the scenario where you have two files: test.html <div id="stuff"></div> <button onclick="doStuff()">Magic</button> <script> var foo = new function() { this.bar = function() { return "THE MAGIC!"; }; ...

javascriptjqueryhtmlajaxscope

Identifying modifications to the content of a text area

Is there a way to determine if the value in my textareaId has changed due to JavaScript? For example: $("#buttonID").on("click, function(){ $("#textareaID").val("lorem ipsum"); }); $("#textareaID").change(function(){ //not working }); $ ...

javascriptjquerytextareaonchange

Fade between two elements using jQuery

Can someone assist me with adding a fade effect between elements in my code? Any advice or suggestions would be greatly appreciated! $("#example p:first").css("display", "block"); jQuery.fn.timer = function() { if(!$(this).children("p:last-child").i ...

jqueryhtmlfadeinfadeout

Using iTextSharp in .Net to convert the action result into a downloadable pdf file via ajax

I have been successfully using iTextSharp to convert a razor view into a downloadable PDF via a C# controller. While the current implementation is functioning perfectly, I am seeking a way to transmit a model from a view to the PDF controller and enable th ...

javascriptc#jqueryajaxitext

Initiate the video tag playback by using jquery.play() function

Is there a way to make the video start playing as soon as the overlaying absolute div has faded out? I've tried using javascript and autoplay, but it doesn't seem to work without controls enabled. Any suggestions? Check out the HTML code below: ...

jqueryhtmlvideohtml5-video

The outcome yielded from a jQuery AJAX request

I'm encountering an issue with my AJAX call using jQuery. I am sending information to the server and receiving back HTML data as intended. When I log the data in Firebug, it appears as an object with all of the tags. However, when I attempt to manipul ...

jqueryajax

What is the method for customizing the scroll highlight color within bookdown by modifying the style.css file?

One interesting aspect of Bookdown is its built-in feature that automatically highlights in blue the section in the sidebar that you are currently scrolling past or reading. However, I'm having trouble changing the color in the style.css page. Using a ...

cssbookdown

modify the color of a box within a grid upon clicking it

I am curious if it is possible to change the color of a box when it is clicked. I am working on coding a "calculator layout" and would like to start with this part 1 2 3 4 5 6 7 8 9 0 This is what I have been working on and struggling with. $(docume ...

javascripthtmljquerycss

Using PhoneGap to load JSON data with the File API when clicking an event

I have successfully developed code that loads JSON data from an external file on the device. The program is designed to work as follows: Upon a click event, it will first attempt to access the local storage file (course.txt) and if it exists, it will read ...

jqueryjsoncordovafilereader