CSS: Horizontal, comma-separated list with fixed <li> width

StackOverflow https://stackoverflow.com/questions/2900497

Question

I would like to achieve the following structure:

[gfhtfg..., kgjrfg..., asd,      mrhgf,   ]  
 ^-------^  ^-------^  ^-------^ ^-------^  
     X          X          X         X
(X = a fixed length)

I've got a <div> with a fixed length, and inside it an horizontal, comma-separated list (ul) of links.
The <li> elements should have a fixed width, and so if the links exceed a fixed length an ellipsis will be shown (using the text-overflow property).

I know two ways to make a list horizontal. One is using display: inline and the other using the float property.

  • With the first approach, I can't set a fixed width because the CSS specification doesn't allow setting the width of inline elements.
  • The second approach creates a mess :O
  • Setting float on the <a> element, intending to limit the width there, separates it from the commas.

There are no browser-compatibility issues, I only have to support WebKit.

I included the code I attempted to work with:

<!DOCTYPE html>
<html lang="en">
<head>
 <title>a title</title>
 <style>
  body { font-family: arial; font-size: 10pt; }

  div {
   height: 30px;
   width: 300px;
   background: #eee;
   border: 1px solid #ccc;
   text-align: center;
  }

  ul { margin: 0px; padding: 0px; }
  ul li:after { content: ","; }
  ul li:last-child:after { content: ""; }
  ul li a { text-decoration: none; color: #666; }

  ul li {
   margin: 0px;
   padding: 0px;
   list-style: none;
   overflow: hidden;
   text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
   /* Inline elements can't have a width (and they shouldn't according to the specification */
   display: inline;
   width: 30px;
  }
 </style>
</head>
<body>

<div>
 <ul>
  <li><a href="#">a certain link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">once again</a></li>
  <li><a href="#">another one</a></li>
 </ul>
</div>

</body>
</html>

Thank you.

Was it helpful?

Solution 

...
ul li a {
 text-decoration: none; color: #666; 
 display: inline-block; 
 max-width: 50px; /* 'X' minus gutter */
 white-space: nowrap; 
 text-overflow: ellipsis; 
 overflow:hidden;
}
ul li {
 margin: 0px;
 padding: 0px;
 list-style: none;
 white-space: nowrap;
 display: inline-block;
 width: 60px; /* 'X' */
}
...

My 2¢

OTHER TIPS

Set the 'display' attribute of the li elements to 'inline-block'. It is fully compatible with WebKit browsers. You cannot give an inline level element dimensions, but you can to a block level element. inline-block is a happy medium in your case - it allows dimensions but displays inline. It is a better alternative to floats and clears too I think.

Have you tried display: inline-block and set a fixed width? This allows you to have inline elements that can be sized, just like an img tag.

I've tried display: inline-block before, but if the links had spaces in them the words would break into a new line.
Further random searching revealed that white-space: nowrap; fixes that problem, and so the final solution is to add these properties to the <li> element:

ul li {
 width: 30px;
 display: inline-block;
 white-space: nowrap;
}

Thank you for your replies.

EDIT: Actually, the commas are not displayed.
Removing the overflow and text-overflow properties reveals that the <li> elements overlap, and that the commas are hidden with the rest of the text.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top