Overflow hidden not working as expected on inline items

-1

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

share|improve this question

edited Nov 19 '18 at 12:52

Johannes

36.4k102967

asked Nov 19 '18 at 12:45

bthe0

7391818

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  You can add white-space: nowrap; to .a I think
  – Alon Eitan
  Nov 19 '18 at 12:51
  

  
  
  
  

add a comment | 

-1

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

share|improve this question

edited Nov 19 '18 at 12:52

Johannes

36.4k102967

asked Nov 19 '18 at 12:45

bthe0

7391818

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  You can add white-space: nowrap; to .a I think
  – Alon Eitan
  Nov 19 '18 at 12:51
  

  
  
  
  

add a comment | 

-1

-1

-1

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

share|improve this question

edited Nov 19 '18 at 12:52

Johannes

36.4k102967

asked Nov 19 '18 at 12:45

bthe0

7391818

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

share|improve this question

edited Nov 19 '18 at 12:52

Johannes

36.4k102967

asked Nov 19 '18 at 12:45

bthe0

7391818

share|improve this question

edited Nov 19 '18 at 12:52

Johannes

36.4k102967

asked Nov 19 '18 at 12:45

bthe0

7391818

share|improve this question

share|improve this question

edited Nov 19 '18 at 12:52

Johannes

36.4k102967

edited Nov 19 '18 at 12:52

Johannes

36.4k102967

edited Nov 19 '18 at 12:52

Johannes

36.4k102967

36.4k102967

asked Nov 19 '18 at 12:45

bthe0

7391818

asked Nov 19 '18 at 12:45

bthe0

7391818

asked Nov 19 '18 at 12:45

bthe0

7391818

7391818

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  You can add white-space: nowrap; to .a I think
  – Alon Eitan
  Nov 19 '18 at 12:51
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  You can add white-space: nowrap; to .a I think
  – Alon Eitan
  Nov 19 '18 at 12:51
  

  
  
  
  

1

1

You can add white-space: nowrap; to .a I think
– Alon Eitan
Nov 19 '18 at 12:51

You can add white-space: nowrap; to .a I think
– Alon Eitan
Nov 19 '18 at 12:51

add a comment | 

3 Answers
3

active

oldest

votes

1

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>

share|improve this answer

answered Nov 19 '18 at 12:51

Vucko

15k54384

add a comment | 

1

You can add white-space: nowrap; to the parent container

https://codepen.io/anon/pen/rQGRdO

share|improve this answer

answered Nov 19 '18 at 12:51

Johannes

36.4k102967

add a comment | 

1

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>

share|improve this answer

answered Nov 19 '18 at 12:56

Viira

2,173423

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

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

Name

Email

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

Name

Email

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

active

oldest

votes

active

oldest

votes

1

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>

share|improve this answer

answered Nov 19 '18 at 12:51

Vucko

15k54384

add a comment | 

1

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>

share|improve this answer

answered Nov 19 '18 at 12:51

Vucko

15k54384

add a comment | 

1

1

1

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>

share|improve this answer

answered Nov 19 '18 at 12:51

Vucko

15k54384

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>

share|improve this answer

answered Nov 19 '18 at 12:51

Vucko

15k54384

share|improve this answer

share|improve this answer

answered Nov 19 '18 at 12:51

Vucko

15k54384

answered Nov 19 '18 at 12:51

Vucko

15k54384

answered Nov 19 '18 at 12:51

Vucko

15k54384

15k54384

add a comment | 

add a comment | 

1

You can add white-space: nowrap; to the parent container

https://codepen.io/anon/pen/rQGRdO

share|improve this answer

answered Nov 19 '18 at 12:51

Johannes

36.4k102967

add a comment | 

1

You can add white-space: nowrap; to the parent container

https://codepen.io/anon/pen/rQGRdO

share|improve this answer

answered Nov 19 '18 at 12:51

Johannes

36.4k102967

add a comment | 

1

1

1

You can add white-space: nowrap; to the parent container

https://codepen.io/anon/pen/rQGRdO

share|improve this answer

answered Nov 19 '18 at 12:51

Johannes

36.4k102967

You can add white-space: nowrap; to the parent container

https://codepen.io/anon/pen/rQGRdO

share|improve this answer

answered Nov 19 '18 at 12:51

Johannes

36.4k102967

share|improve this answer

share|improve this answer

answered Nov 19 '18 at 12:51

Johannes

36.4k102967

answered Nov 19 '18 at 12:51

Johannes

36.4k102967

answered Nov 19 '18 at 12:51

Johannes

36.4k102967

36.4k102967

add a comment | 

add a comment | 

1

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>

share|improve this answer

answered Nov 19 '18 at 12:56

Viira

2,173423

add a comment | 

1

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>

share|improve this answer

answered Nov 19 '18 at 12:56

Viira

2,173423

add a comment | 

1

1

1

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>

share|improve this answer

answered Nov 19 '18 at 12:56

Viira

2,173423

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>

share|improve this answer

answered Nov 19 '18 at 12:56

Viira

2,173423

share|improve this answer

share|improve this answer

answered Nov 19 '18 at 12:56

Viira

2,173423

answered Nov 19 '18 at 12:56

Viira

2,173423

answered Nov 19 '18 at 12:56

Viira

2,173423

2,173423

add a comment | 

add a comment | 

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

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

Name

Email

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

Name

Email

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

Name

Email

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

Name

Email

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

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here