SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: wrap text

  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    wrap text

    Hello All,

    I'm trying to wrap long line.I'm using the following code

    Code:
    <span>Name:</span><span style="margin: 0;word-wrap: break-word;width: 35em;padding-left: 6em;"><c:out value="Z XCVBNML KJZXCVBNMLKJZXCVBNMLKJZXCVBNMLKJ ZXCVBNMLKJZXCVBNMLKJZXCVB NMLKJZXCVBNMLKJZXCVBNMLKJ"/></span>
    I want the text to be displayed as

    Code:
    Name:   Z XCVBNML KJZXCVBNMLKJZXCVBNMLKJ
            XCVBNMLKJ ZXCVBNMLKJZXCVBNMLKJZXCVB 
            NMLKJZXCVBNMLKJZXCVBNMLKJ


    but using the above code I'm getting something like this:

    Code:
    Name:   
            Z XCVBNML KJZXCVBNMLKJZXCVBNMLKJ
            XCVBNMLKJ ZXCVBNMLKJZXCVBNMLKJZXCVB 
            NMLKJZXCVBNMLKJZXCVBNMLKJ
    i.e., I'm getting extra space...

    Help is greatly appreciated in placing them inline.

    Thanks..

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    How do you want it to look?
    As the two examples above are identical

  3. #3
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    How do you want it to look?
    As the two examples above are identical

    Thanks for your reply ...


    Please observe that in my first code both the name and name text are inline but in my second code the name and name text are separated by a line break....

    Thanks...

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Spans are inline , so a new Span makes a new line ?, they also don't take padding and margins and width's, unless you make them block level or float them

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<!-- saved from url=(0022)http://www.domain.com/ -->
    	<style type="text/css">
    	*{padding:0;margin:0;}
    	
    	.x{width:35em;overflow:hidden;}
    	
    	.y{float:left;}
    	
    	.z{
    	word-wrap:break-word;
    	padding-left:6em;
    	overflow:auto;
    	background:#ffffcc;
    	}
    	
    	* html .z{float:left;}
    	* html .z span{height:1&#37;;display:block;}
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body>
    
    
    <div class="x">
    
    <p class="y">Name:</p>
    
    <p class="z">
    <span>
    Z XCVBNML KJZXCVBNMLKJZXCVBNMLKJZXCVBNMLKJ ZXCVBNMLKJZXCVBNMLKJZXCVB NMLKJZXCVBNMLKJZXCVBNMLKJ"
    </span>
    
    </p>
    
    </div>
    
    </body>
    </html>
    Same with less mark-up, stronger css , the IE hacks hidden, this needs a container with a minimum width
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<!-- saved from url=(0022)http://www.domain.com/ -->
    	<style type="text/css">
    	*{padding:0;margin:0;}
    	
    	.x{overflow:hidden;}
    	
    	.x p{float:left;}
    	
    	.x span{
    	display:block;
    	width:25em;
    	word-wrap:break-word;
    	padding-left:6em;
    	overflow:auto;
    	background:#ffffcc;
    	}
    	
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body>
    
    
    <div class="x">
    
    <p>Name:</p>
    
    <p>
    
    <span>
    Z XCVBNML KJZXCVBNMLKJZXCVBNMLKJZXCVBNMLKJ ZXCVBNMLKJZXCVBNMLKJZXCVB NMLKJZXCVBNMLKJZXCVBNMLKJ"
    </span>
    
    </p>
    
    </div>
    
    
    </body>
    </html>
    Last edited by all4nerds; Sep 9, 2007 at 07:24.

  5. #5
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot for your reply....I really appreciate it...



    Quote Originally Posted by all4nerds View Post
    Hello

    Spans are inline , so a new Span makes a new line ?, they also don't take padding and margins and width's, unless you make them block level or float them

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<!-- saved from url=(0022)http://www.domain.com/ -->
    	<style type="text/css">
    	*{padding:0;margin:0;}
    	
    	.x{width:35em;overflow:hidden;}
    	
    	.y{float:left;}
    	
    	.z{
    	word-wrap:break-word;
    	padding-left:6em;
    	overflow:auto;
    	background:#ffffcc;
    	}
    	
    	* html .z{float:left;}
    	* html .z span{height:1%;display:block;}
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body>
    
    
    <div class="x">
    
    <p class="y">Name:</p>
    
    <p class="z">
    <span>
    Z XCVBNML KJZXCVBNMLKJZXCVBNMLKJZXCVBNMLKJ ZXCVBNMLKJZXCVBNMLKJZXCVB NMLKJZXCVBNMLKJZXCVBNMLKJ"
    </span>
    
    </p>
    
    </div>
    
    </body>
    </html>
    Same with less mark-up, stronger css , the IE hacks hidden, this needs a container with a minimum width
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<!-- saved from url=(0022)http://www.domain.com/ -->
    	<style type="text/css">
    	*{padding:0;margin:0;}
    	
    	.x{overflow:hidden;}
    	
    	.x p{float:left;}
    	
    	.x span{
    	display:block;
    	width:25em;
    	word-wrap:break-word;
    	padding-left:6em;
    	overflow:auto;
    	background:#ffffcc;
    	}
    	
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body>
    
    
    <div class="x">
    
    <p>Name:</p>
    
    <p>
    
    <span>
    Z XCVBNML KJZXCVBNMLKJZXCVBNMLKJZXCVBNMLKJ ZXCVBNMLKJZXCVBNMLKJZXCVB NMLKJZXCVBNMLKJZXCVBNMLKJ"
    </span>
    
    </p>
    
    </div>
    
    
    </body>
    </html>

  6. #6
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot...I really appreciate it...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •