(Horizontal)Overflow text should come on next line.......

**pankaj.ghadge** · 11-05-2008, 06:34 AM

Hello,

i have crated a div. In this div i don't want horizontal scroll bar. I want to display horizontal overflow text on the next line ................

If i hidden horizontal scroll then it is not showing me contain which gets overflowed.
I want that contain to be shown on next line ...............
Suppose i have entered "asssssssssssssssssssssssssssssssssssssssssssssdddddddddddddddddddddddddddddddddddddddaaaaaaa"
(do not use the space ..)

here is the code ......................
please tell me

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.class-div
{
	overflow-y: auto; 
	overflow-x: hidden;
}
</style>
<script type="text/javascript">
function openDiv()
{
	var newDiv = document.createElement('div'), s = newDiv.style;
	newDiv.setAttribute('id',"divEntry");
	newDiv.className="class-div";
	s.border = '1px solid gray';
	s.color = '#ccc';
	s.width = '200px';
	s.height = '200px';
	s.backgroundColor = '#488be8';
	s.top = '200px';
	s.left = '200px';
	s.position = 'fixed';
	document.body.appendChild(newDiv);	
};
function entervalue(evt)
{

	var charCode = (evt.which) ? evt.which : window.event.keyCode;
	
	if(charCode==13)
	{
		document.getElementById("divEntry").innerHTML+=document.getElementById("txtEnter").value+"<br>";
		document.getElementById("txtEnter").value="";
	}

}
onload=openDiv;
</script>
</head>
<body>
<!--<input type="button" value="click me to create Div in Right frame" onclick="return openDiv(100,100);">-->
<input type="text" id="txtEnter" onkeypress="entervalue(event)"> enter a value in this text box and press Enter
</body>
</html>

**Snookerman** · 11-05-2008, 12:05 PM

This is what you are looking for:

Code:

.class-div {
	overflow-y: auto;
	overflow-x: hidden;
	word-wrap: break-word;
}

However, it only works in IE as far as I know. Maybe someone else has a solution for Fx.

Edit: Apparently, Fx3.1 will support word-wrap

**Snookerman** · 11-05-2008, 01:02 PM

There is at least one solution that will work in all browsers, however you need to use javascript and I can't help you with that, but it can't be too difficult. What you need to do is write a script that inserts this:
& #8203;(remove the space after &)
after every character. This is a space that is invisible unless it is needed, meaning that it will not show unless the long word runs into a barrier (your div). When it shows it will cause a break.

Here is an example, try resizing the with of your window:

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE

Now this is what it looks like without the 8203 space:

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE

**Snookerman** · 11-05-2008, 01:24 PM

I found this page that will help you do what I mentioned in my last post:
http://blog.stchur.com/2007/02/22/em...ozillafirefox/
Good luck!

Thread: (Horizontal)Overflow text should come on next line.......

Thread Tools

Search Thread

(Horizontal)Overflow text should come on next line.......

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions