CSS: Horizontal, comma-separated list with fixed <li> width
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
floaton 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.
Answer
...
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¢