Home/ Questions/Q 198123
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T16:54:41+00:00

Let say I have this HTML code snippet: <div id=container> <div id=textContent>Text Content Te</div>

  • 0

Let say I have this HTML code snippet:

<div id="container">
<div id="textContent">Text Content Te</div>
<div id="anotherText">Another Text Content</div>
</div>

Original HTML output http://img26.imageshack.us/img26/1571/beforeeffect.gif

I wonder how I could dynamically resize the div‘s textContent width so that it fits its text content nicely (neither the text will be wrapping nor scrolling nor truncated).

Desired HTML output http://img26.imageshack.us/img26/5851/desiredeffect.gif

I am open to any solution using CSS and/or JavaScript.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I wonder how could I dynamically
    resized the div’s width to fit the
    text content (without wrapping)?

    Assuming the content would fit without overflowing, you could use a float without a width set (width isn’t required in CSS 2.1 or greater). Without more detail, I can’t suggest where to put it or what other properties to set to get the desired effect (eg, floats float down around following content, so put it at the beginning of a paragraph).

    If you’re not concerned with the effect looking perfect on old browsers like Internet Explorer, you could use display: table or display: table-cell, with the caveat that tables don’t overflow: they stretch. That stretching may be desirable if you want to avoid overflow of your div, but allow it to overlow the viewport — eg, a film strip that scrolls horizontally. In that case, altCognito’s suggestion of white-space: nowrap would be very useful.

    • 0