Wrapping mid-word using CSS

HTML & CSS
1

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

2

Thanks a lot for the help. That’s exactly what I needed.

3

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.

4

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.