(Horizontal)Overflow text should come on next line....... [Archive]

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

<!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="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:

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

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/emulating-css-word-wrap-for-mozillafirefox/
Good luck!