Is there a way using CSS to force a string to wrap onto a new line mid-word when it reaches the edge of a container.
It sounds pretty simple in theory but I can’t find any way to do this.
Thanks
Is there a way using CSS to force a string to wrap onto a new line mid-word when it reaches the edge of a container.
It sounds pretty simple in theory but I can’t find any way to do this.
Thanks
Thanks a lot for the help. That’s exactly what I needed.
word-wrap: break-word;
I don’t think it’s actually an official part of CSS so it might not work everywhere, but it seems to be pretty well supported by most browsers.
Yes word-break:break-word is part of cSS3 and has been implemented in IE since about IE5 IIRC.
The latest webkit, Firefox and opera all support it now.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div {
width:300px;
background:#f9f9f9;
word-wrap:break-word;
}
</style>
</head>
<body>
<div>lkdjlkkkdkjlkdjpuoiehndnlknlkmdljomllkjkdjdijijddkgeubrbnrkrkmnrmnrmmrmrmfhkhhohhoihoihgjhftytm</div>
</body>
</html>
In tables IE usually needs a wrapper in the table-cell to have the word wrap applied to and Firefox needs the table to be table-layout:fixed.