Databases
StackOverflow2013
Postsdbo
POWrap div width to contents but also wrap contents at a certain point
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWrap div width to contents but also wrap contents at a certain point
    primarykey
    data
    text
    <p>Maybe this is asking to have my cake and eat it to, but I think I am close to a solution and just need a little help. I have done quite a bit of googling but have not been able to find exactly what I am looking for.</p> <p>I am creating a clickable icon to activate some javascript on the page. There can be multiple icons and the text on the icon is provided by the user. I am wrapping the icons to 55px which will make the text properly go on to a new line, but if there is a single word that extends beyond 55px it will break out of the containing div.</p> <p>I have a mockup of the relevant code</p> <p>HTML:</p> <pre><code>&lt;div class="outer"&gt; &lt;div class="inner"&gt; &lt;a&gt; &lt;img src="chronometer.png" height=32px width=32px /&gt; &lt;div class="text"&gt;Superawesomethingymabob&lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>div.outer { border: 1px solid blue; background-color: cyan; float:left; text-align: center; } div.inner { border: 1px solid red; width:55px; } div.text { background-color:yellow; width:auto; } a { display:inline-block; } </code></pre> <p>So basically what I'm doing is I have an inner div with a fixed width so text will wrap. The outer div is floated left so it will shrink-wrap to it's contents. The problem is that the outer div will shrink-wrap to the inner div's width, not the width of the text that breaks out of the inner div.</p> <p>Any help or suggestions would be appreciated and rewarded with 500 internets. I am flexible on the markup or CSS, I just want something that is cross browser compatible. </p> <p>Thanks in advance.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USjcbwlkr
    1. USjcbwlkr
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COCould you show/tell what the result should look like?
      singulars
      1. POWrap div width to contents but also wrap contents at a certain point
      1. USmarc
    2. COyeah .. just draw some image that represents the final result and give the link
      singulars
      1. POWrap div width to contents but also wrap contents at a certain point
      1. USBoopathi Rajaa
    3. COHere is a link of how I want it to behave. [solution](http://jacobw.dyndns.org:8000/soIconProblem.png)
      singulars
      1. POWrap div width to contents but also wrap contents at a certain point
      1. USjcbwlkr
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload