ansaurus

Question

Answer 1

+8 A:

Setting the width on the ul element should do the trick. I tried it with your basic example, and it works in FF3, IE 5.5-8.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html>
 <head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title>test</title>
  <style type="text/css" media="screen">
   ul {
    width: 80px;
   }
  </style>
 </head>
 <body>
  <ul>
      <li> normal sized </li>
      <li> big massive long one that i'd like to wrap to the next line like below </li>
      <li> the result that i'd like to see </li>
  </ul>
 </body>
</html>

Kamiel Wanrooij 2009-04-03 13:46:23

Answer 2

+3 A:

The text will be wrapped by itself with no CSS applied at all when it reaches the end of the viewport ("viewing area" in the browser) or the end of its elements specified width. This applies to all elements as long as they are not absolutely positioned outside the viewport initially.

I must say I'd like to know how you actually made the text extend beyond the viewport or width of UL/LI.

Arve Systad 2009-04-03 13:46:37

Answer 3

+1 A:

How are you setting the width on the element?

The following will not work:

<ul width="100">
    <li>Normal Sized</li>
    <li>Big massive long one that I'd like to wrap to the next line</li>
    <li>The result I'd like to see</li>
</ul>

You need to set with width either in CSS or in the style property on the tag:

<ul style="width: 100px;">
    <li>Normal Sized</li>
    <li>Big massive long one that I'd like to wrap to the next line</li>
    <li>The result I'd like to see</li>
</ul>

or you could create a css class rather than setting the width for every ul on the page:

<style type="text/css" media="screen">
    .smallList {
        width: 100px;
    }
</style>

<ul class="smallList">
    <li>Normal Sized</li>
    <li>Big massive long one that I'd like to wrap to the next line</li>
    <li>The result I'd like to see</li>
</ul>

Justin Niessner 2009-04-03 13:49:34

I'm sure you meant .smallList rather than #smallList in your style.

Traingamer 2009-04-03 14:15:41

ansaurus

tags:

views:

answers:

"word-wrap" an LI within a UL

related questions