How to wrap the text in a square frame (the width and height are the same)?

Can be done in px , but the text is dynamic.

    3 answers 3

    can be like this

     setInterval (function (){ var w = document.getElementById('blk').offsetWidth; document.getElementById("blk").style.height = document.getElementById('blk').offsetWidth + 'px'; },200); 
     div { border:1px solid black; display: -moz-inline-stack; display: inline-block; vertical-align: top; *display: inline; } 
     <div id="blk"> text text text </div>

    • Still it is necessary to interrupt it ..... - Vorobev Alexander
    • I wonder how it will look with a large text ...... - Vorobyev Alexander

    It is possible for this block, where the text is located, to define a certain style, in the case of a frame, use the border .

    Sample text in frame:

     #block { border: 1px solid black; } 
     <div id='block'> Задача организации, в особенности же новая модель организационной деятельности представляет собой интересный эксперимент проверки существенных финансовых и административных условий. Разнообразный и богатый опыт постоянный количественный рост</div>

    • The author indicates (the width and height are the same) - square frame - Zoltan Toth

    Leads to the minimum (in size) possible square. You can redo the cycle - then it will be more smoothly

     var i = 0, n=0, pre = 0; var timerId = setInterval (function (){ var w = document.getElementById('block').offsetWidth; var h = document.getElementById('block').offsetHeight; if (w == h) { clearTimeout(timerId); } else { n = ((w + h) / 2); if (n == pre) { document.getElementById("block").style.width = n + 'px'; document.getElementById("block").style.height = n + 'px'; clearTimeout(timerId); } else { if (n > w) n = w; document.getElementById("block").style.width = n + 'px'; pre = n; } } },200);