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:


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">
<div style="width:100px; height:60px; background:#996;">

Or try this style: 

span { white-space:pre }

See also: Fixe Span Width in CSS

Related Articles


Leave a Reply

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


  • Enter Email Address:

Recent Post

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