wrap text

**ssrd999** · Sep 8, 2007 14:51

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..

**markbrown4** · Sep 8, 2007 15:10

How do you want it to look?
As the two examples above are identical

**ssrd999** · Sep 9, 2007 06:27

Originally Posted by markbrown4

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...

**all4nerds** · Sep 9, 2007 06:54

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>

**ssrd999** · Sep 9, 2007 07:54

Thanks a lot for your reply....I really appreciate it...

Originally Posted by all4nerds

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>

**ssrd999** · Sep 9, 2007 07:55

Thanks a lot...I really appreciate it...

User Tag List

Thread: wrap text

Thread Tools

Display

Hybrid View

wrap text

Bookmarks

Bookmarks

Posting Permissions