BIOS,Windows, Linux, Software,Security, Domains, Web Hosting

How to Set SPAN with Nowrap

If you use float style with SPAN tag following other normal text, you may get a wrap text in result. Here some test example of span with nowrap.

1. Make the text nowrap in float:right

Test example:

<li> AAA<span>BBB</span></li>

If you use float:right with span style, BBB will wrap in IE6, but be normal in Firefox, chrome. You can use

li { position:relative;}
li span{ position:absolute;right:0px;}

2. Reverse arrangement of span and normal text

Test example:

<li><span>AAA</span>BBB</li>

Then li style like this:

li {text-align:right;}
li span{float:left;}

3. How to make span like pre with long text

Test example:

<style type="text/css">
span{white-space:nowrap;}
</style>
<div style="width:100px; height:60px; background:#996;">
<span>SPANNOWRAPSPANNOWRAP</span>
</div>

Or try this style: 

span { white-space:pre }

See also: Fixe Span Width in CSS

Related Articles

Comments(0)  

Leave a Reply

Subscribe to BootBeta Comments RSS feed to receive notification of latest comments posted.

Subscriptions

  • Enter Email Address:

Recent Post

Copyright@ 2010-2014 Bootbeta All Rights Reserved.
HooBlog Ver 1.5 Build 20140530