my CSS
ul{
overflow:hidden;
}
li{
display:inline-block;
}
my HTML
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>
i want to align all my li items in one line, if i did that everything works fine except that when 3 or 4 li's fills the first line on my body they go the the second line, i want them to be on 1 line and everything after the 1 line is filled will be "hidden"
FOR EXAMPLE ::
// NOTE li holds sentences not just 1 letter
OUTPUT NOW ::
a b c d
e f g
DESIRED OUTPUT ::
a b c d e f //all of them in 1 line and the rest of them are hidden 'overflow:hidden'
Try putting white-space:nowrap; in your <ul> style
edit: and use 'inline' rather than 'inline-block' as other have pointed out (and I forgot)
Using Display: table
HTML:
<ul class="my-row">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
CSS:
ul.my-row {
display: table;
width: 100%;
text-align: center;
}
ul.my-row > li {
display: table-cell;
}
SCSS:
ul {
&.my-row {
display: table;
width: 100%;
text-align: center;
> li {
display: table-cell;
}
}
}
Work great for me
Here is what you want. In this case you do not want the list items to be treated as blocks that can wrap.
li{display:inline}
ul{overflow:hidden}
I think the NOBR tag might be overkill, and as you said, unreliable.
There are 2 options available depending on how you are displaying the text.
If you are displaying text in a table cell you would do Long Text Here. If you are using a div or a span, you can use the style="white-space: nowrap;"
This works as you wish:
<html>
<head>
<style type="text/css">
ul
{
overflow-x:hidden;
white-space:nowrap;
height: 1em;
width: 100%;
}
li
{
display:inline;
}
</style>
</head>
<body>
<ul>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
</ul>
</body>
</html>
I'm would recommend it:
<style>
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
ul.list {
list-style: none;
}
ul.list li {
display: inline-block;
}
</style>
<ul class="list clearfix">
<li>li-one</li>
<li>li-two</li>
<li>li-three</li>
<li>li-four</li>
</ul>
Other than white-space:nowrap; also add the following CSS
ul li{
display: inline;
}
Source: Stackoverflow.com