Overflow hidden not working as expected on inline items
up vote
-1
down vote
favorite
I am trying to hide items that are wider than parent's width. Here's a codepen URL: https://codepen.io/anon/pen/zMEbrY . As you can see, the children break on new lines while I want them to stay on same line.
.a {
width: 21px;
overflow: hidden;
}
.b, .c {
display: inline;
}
.b {
}
.c {
}
css css3
edited Nov 19 at 12:52
Johannes
36.1k102766
asked Nov 19 at 12:45
bthe0
7341817
add a comment |
up vote
-1
down vote
favorite
I am trying to hide items that are wider than parent's width. Here's a codepen URL: https://codepen.io/anon/pen/zMEbrY . As you can see, the children break on new lines while I want them to stay on same line.
.a {
width: 21px;
overflow: hidden;
}
.b, .c {
display: inline;
}
.b {
}
.c {
}
css css3
edited Nov 19 at 12:52
Johannes
36.1k102766
asked Nov 19 at 12:45
bthe0
7341817
1
You can addwhite-space: nowrap;to.aI think
– Alon Eitan
Nov 19 at 12:51
add a comment |
up vote
-1
down vote
favorite
up vote
-1
down vote
favorite
I am trying to hide items that are wider than parent's width. Here's a codepen URL: https://codepen.io/anon/pen/zMEbrY . As you can see, the children break on new lines while I want them to stay on same line.
.a {
width: 21px;
overflow: hidden;
}
.b, .c {
display: inline;
}
.b {
}
.c {
}
css css3
edited Nov 19 at 12:52
Johannes
36.1k102766
asked Nov 19 at 12:45
bthe0
7341817
I am trying to hide items that are wider than parent's width. Here's a codepen URL: https://codepen.io/anon/pen/zMEbrY . As you can see, the children break on new lines while I want them to stay on same line.
.a {
width: 21px;
overflow: hidden;
}
.b, .c {
display: inline;
}
.b {
}
.c {
}
css css3
css css3
edited Nov 19 at 12:52
Johannes
36.1k102766
asked Nov 19 at 12:45
bthe0
7341817
edited Nov 19 at 12:52
Johannes
36.1k102766
asked Nov 19 at 12:45
bthe0
7341817
edited Nov 19 at 12:52
Johannes
36.1k102766
edited Nov 19 at 12:52
Johannes
36.1k102766
edited Nov 19 at 12:52
Johannes
36.1k102766
36.1k102766
asked Nov 19 at 12:45
bthe0
7341817
asked Nov 19 at 12:45
bthe0
7341817
asked Nov 19 at 12:45
bthe0
7341817
7341817
1
You can addwhite-space: nowrap;to.aI think
– Alon Eitan
Nov 19 at 12:51
add a comment |
1
You can addwhite-space: nowrap;to.aI think
– Alon Eitan
Nov 19 at 12:51
1
1
You can add
white-space: nowrap; to .a I think– Alon Eitan
Nov 19 at 12:51
You can add
white-space: nowrap; to .a I think– Alon Eitan
Nov 19 at 12:51
add a comment |
3 Answers
3
active
oldest
votes
up vote
1
down vote
accepted
Use white-space:
.a {
width: 21px;
overflow: hidden;
white-space: nowrap;
}
.b, .c {
display: inline;
}<div class="a">
<div class="b">500</div>
<div class="c">501</div>
</div>answered Nov 19 at 12:51
Vucko
14.9k54381
add a comment |
up vote
1
down vote
You can add white-space: nowrap; to the parent container
https://codepen.io/anon/pen/rQGRdO
answered Nov 19 at 12:51
Johannes
36.1k102766
add a comment |
up vote
1
down vote
Use white-space:nowrap this will cut all the overflowing elements out of its jurisdiction
.a {
width: 21px;
overflow: hidden;
white-space: nowrap;
}
.b, .c {
display: inline;
}
.b {
}
.c {
}<div class="a">
<div class="b">500</div>
<div class="c">501</div>
</div>answered Nov 19 at 12:56
Viira
1,537320
add a comment |
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
Use white-space:
.a {
width: 21px;
overflow: hidden;
white-space: nowrap;
}
.b, .c {
display: inline;
}<div class="a">
<div class="b">500</div>
<div class="c">501</div>
</div>answered Nov 19 at 12:51
Vucko
14.9k54381
add a comment |
up vote
1
down vote
accepted
Use white-space:
.a {
width: 21px;
overflow: hidden;
white-space: nowrap;
}
.b, .c {
display: inline;
}<div class="a">
<div class="b">500</div>
<div class="c">501</div>
</div>answered Nov 19 at 12:51
Vucko
14.9k54381
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
Use white-space:
.a {
width: 21px;
overflow: hidden;
white-space: nowrap;
}
.b, .c {
display: inline;
}<div class="a">
<div class="b">500</div>
<div class="c">501</div>
</div>answered Nov 19 at 12:51
Vucko
14.9k54381
Use white-space:
.a {
width: 21px;
overflow: hidden;
white-space: nowrap;
}
.b, .c {
display: inline;
}<div class="a">
<div class="b">500</div>
<div class="c">501</div>
</div>.a {
width: 21px;
overflow: hidden;
white-space: nowrap;
}
.b, .c {
display: inline;
}<div class="a">
<div class="b">500</div>
<div class="c">501</div>
</div>.a {
width: 21px;
overflow: hidden;
white-space: nowrap;
}
.b, .c {
display: inline;
}<div class="a">
<div class="b">500</div>
<div class="c">501</div>
</div>answered Nov 19 at 12:51
Vucko
14.9k54381
answered Nov 19 at 12:51
Vucko
14.9k54381
answered Nov 19 at 12:51
Vucko
14.9k54381
answered Nov 19 at 12:51
Vucko
14.9k54381
14.9k54381
add a comment |
add a comment |
up vote
1
down vote
You can add white-space: nowrap; to the parent container
https://codepen.io/anon/pen/rQGRdO
answered Nov 19 at 12:51
Johannes
36.1k102766
add a comment |
up vote
1
down vote
You can add white-space: nowrap; to the parent container
https://codepen.io/anon/pen/rQGRdO
answered Nov 19 at 12:51
Johannes
36.1k102766
add a comment |
up vote
1
down vote
up vote
1
down vote
You can add white-space: nowrap; to the parent container
https://codepen.io/anon/pen/rQGRdO
answered Nov 19 at 12:51
Johannes
36.1k102766
You can add white-space: nowrap; to the parent container
https://codepen.io/anon/pen/rQGRdO
answered Nov 19 at 12:51
Johannes
36.1k102766
answered Nov 19 at 12:51
Johannes
36.1k102766
answered Nov 19 at 12:51
Johannes
36.1k102766
answered Nov 19 at 12:51
Johannes
36.1k102766
36.1k102766
add a comment |
add a comment |
up vote
1
down vote
Use white-space:nowrap this will cut all the overflowing elements out of its jurisdiction
.a {
width: 21px;
overflow: hidden;
white-space: nowrap;
}
.b, .c {
display: inline;
}
.b {
}
.c {
}<div class="a">
<div class="b">500</div>
<div class="c">501</div>
</div>answered Nov 19 at 12:56
Viira
1,537320
add a comment |
up vote
1
down vote
Use white-space:nowrap this will cut all the overflowing elements out of its jurisdiction
.a {
width: 21px;
overflow: hidden;
white-space: nowrap;
}
.b, .c {
display: inline;
}
.b {
}
.c {
}<div class="a">
<div class="b">500</div>
<div class="c">501</div>
</div>answered Nov 19 at 12:56
Viira
1,537320
add a comment |
up vote
1
down vote
up vote
1
down vote
Use white-space:nowrap this will cut all the overflowing elements out of its jurisdiction
.a {
width: 21px;
overflow: hidden;
white-space: nowrap;
}
.b, .c {
display: inline;
}
.b {
}
.c {
}<div class="a">
<div class="b">500</div>
<div class="c">501</div>
</div>answered Nov 19 at 12:56
Viira
1,537320
Use white-space:nowrap this will cut all the overflowing elements out of its jurisdiction
.a {
width: 21px;
overflow: hidden;
white-space: nowrap;
}
.b, .c {
display: inline;
}
.b {
}
.c {
}<div class="a">
<div class="b">500</div>
<div class="c">501</div>
</div>.a {
width: 21px;
overflow: hidden;
white-space: nowrap;
}
.b, .c {
display: inline;
}
.b {
}
.c {
}<div class="a">
<div class="b">500</div>
<div class="c">501</div>
</div>.a {
width: 21px;
overflow: hidden;
white-space: nowrap;
}
.b, .c {
display: inline;
}
.b {
}
.c {
}<div class="a">
<div class="b">500</div>
<div class="c">501</div>
</div>answered Nov 19 at 12:56
Viira
1,537320
answered Nov 19 at 12:56
Viira
1,537320
answered Nov 19 at 12:56
Viira
1,537320
answered Nov 19 at 12:56
Viira
1,537320
1,537320
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53374939%2foverflow-hidden-not-working-as-expected-on-inline-items%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
You can add
white-space: nowrap;to.aI think– Alon Eitan
Nov 19 at 12:51