title: How to make an inline ul display horizontally truncated to fit to the screen width if too long
body: <p>I'm trying to make an unordered list which will appear horizontally. I got that part working.</p>
  
  <p>Next I wanted it so that no matter how many items where in the list (ie. too many to fit across the screen) it WOULDN'T wrap to the next line but would just be truncated. I wanted it so its width would be 100% even if it's too big for the screen. By this I mean that it WOULDN'T cause the browser to have a horizontal scrollbar allowing you to scroll to see the rest of the data. What wouldn't fit on the screen would be hidden.</p>
  
  <p>I came up with:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  #navlist li
  {
  display: inline;
  list-style-type: none;
  padding-right: 20px;
  overflow-x:hidden;
  }
  
  #rt, #divlist
  {
  overflow-x:hidden;
  }
  &lt;/style&gt;
  
  &lt;ul id="navlist"&gt;
  &lt;li id="active"&gt;&lt;a href="#" id="current"&gt;Item one&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Item two&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Item three&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Item four&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Item five&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Item six&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Item seven&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Item eight&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Item nine&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Item ten&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Item eleven&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Item twelve&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Item thirteen&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Item fourteen&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Item fifteen&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Ok, so it displays horizontally which is cool but I'm struggling to get the truncation bit to work. It keeps wrapping to the next line.</p>
  
  <p>Anyone know how to do this?</p>