How to set div to expand with transition on text change - html

Question

I want to seamlessly expand my div (in a non-jarring way) when the text inside it changes:
The CSS transition: all 2s ease; is working great for colour changes, manually setting width, etc (as you can try out in the jsfiddle - click button to toggle width). but when the inner text of the div is changed the div just jumps to the new width without any transition.
How can I get the transition working when the inner text changes?
Thanks!

Answer 1

Because the default width of the div will be auto (100%), it can't transition from auto to a numerical value.

Answer 2

I don't think dynamically changing a width of an element depending on its content is possible, as there is no transition for content. The content of an element changes instantly and the width does not get a numerical value in your case - but adjusts.
A solution that can be sometimes applicable: Using a function to roughly calculate your text's width so that you'll be able to set a numerical width for your element on change.
Here's a simple one that I made.
function getTextWidth(text, css) {
var e = $('<span></span>'); // dummy element
e.css(css); // set properties
e.text(text); // set test
var width = e.appendTo($('body')).width(); // append and get width
e.remove(); // remove from DOM
return width;
}
Put together an example of usage.

Answer 3

Hi abagshaw try this script to solved your problem.
var big = false;
$('#content').on('click', function(e) {
if(!big)
{
$( this).animate({
width: "600px" }, 500 );
this.innerHTML = "MORETEXTMORETEXTMORETEXTMORETEXTMORETEXTMORETEXTMORETEXT";
big = true;
}
else
{
$( this).animate({
width: "200px" }, 500 );
this.innerHTML = "LESSTEXTLESSTEXT";
big = false;
}
});
.ui.transitioning.button{
transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;
width:200px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.7/semantic.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ui transitioning teal button" id="content">LESSTEXTLESSTEXT</div>