[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 216
  • Last Modified:

ensure div is always the width of the text and text is not wrapped

I wrap a lot of my text in divs, because I like being able to position the text on the web page and style the text inside the div by applying styling.

Something I run into with the different themes I have for different clients is that depending on the font size, etc. text that all fits on one line for one client may end-up wrapping for another client.  Is there a way to ensure that the text always stays on ONE line?

Thanks!
0
Tom Knowlton
Asked:
Tom Knowlton
  • 3
  • 2
  • 2
  • +1
3 Solutions
 
LZ1Commented:
It will depend on what browser each person is using.  It will also depend on whether or not  your using a CSS reset.

Do you have a specific example you could share?
0
 
HainKurtSr. System AnalystCommented:
try
<div style="width:200px; height:200px; border:1px solid silver"><nobr>ensure div is always the width of the text and text is not wrapped</nobr></div>
<div style="width:200px; height:200px; border:1px solid silver">ensure div is always the width of the text and text is not wrapped</div>

Open in new window

0
 
Tom KnowltonWeb developerAuthor Commented:
Hain's examples match what I am doing, pretty much.

Except...while the <nobr> tag forces the text to a single line, it does not increase the width of the div.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LZ1Commented:
Use float:left; if you can for your div.
0
 
HainKurtSr. System AnalystCommented:
I used div just to see clearly the <nobr> works :) otherwise it would be just:

<nobr>ensure div is always the width of the text and text is not wrapped</nobr>
0
 
DesignbyonyxCommented:
Just want to throw this out there... If you position the div absolutely and do not specify a width, then it will continue to grow in width as you put more text.  This, of course, removes the text from the natural flow of the web page.
0
 
Tom KnowltonWeb developerAuthor Commented:
positioning the div absolutely will not work for this particular page (sorry).
0
 
DesignbyonyxCommented:
figured... just putting it out there.

One thing you can do is to temporarily set the position to absolute, measure the width of the div, and then change it back to static and also set the width to whatever you calculated.  Here's the jQuery... if you want standard javascript, let me know.

var $myDiv = $('#myDiv');
var divW = $myDiv.css('position', 'absolute').outerWidth();
$myDiv.css({'width': divW, 'position': 'static'});

Open in new window

0
 
Tom KnowltonWeb developerAuthor Commented:
thanks...

jQuery to the rescue again.

It's a mighty fine library, is it not?  :P  I am doing so much now with it that previously was kind of a pain.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 3
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now