CSS Issues with word wrapping in an infiinite scrolling div
I am working on a project and want to have infinite horizontal scrolling for cells that each contain a thumbnail and some text. I have everything mostly working. However, I can not get text to wrap. The css and html are below. The first two items in the scroll box have text that should wrap, but overflows.
This is the style (cell 2 is only for demo to alternate background colors):
.container
display: flex;
flex-direction: row;
padding: 10px;
height: 10%;
overflow-x: auto;
white-space: nowrap;
.cell
background: #818181;
flex: fit-content;
padding: 10px;
width: 220px;
height: 8%;
display: inline-block;
.cell2
background: #f44336;
flex: fit-content;
padding: 10px;
width: 220px;
height: 8%;
display: inline-block;
.data
justify-content: center;
word-wrap: break-word;
<div>
<h2>Scroll Test</h2>
<div class="container">
<div class="cell">
<a href= "#">
<span class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"></span>
<span class="data"> <h3>Some text here</h3></span>
</a>
</div>
<div class="cell2">
<a href= "#">
<span class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"></span>
<span class="data"> <h3>Some text here that will over flow</h3></span>
</a>
</div>
<div class="cell">
<a href= "#">
<span class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"></span>
<span class="data"> <h3>Some text here</h3></span>
</a>
</div>
<div class="cell2">
<a href= "#">
<div class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"> </div>
<div class="data"> <h3>Some text here</h3></div>
</a>
</div>
<?php } ?>
</div>
</div>Link to fiddle: https://jsfiddle.net/jonathannah/3rxcktpm/29/
html css
edited Nov 14 '18 at 7:33
Viira
2,348426
asked Nov 14 '18 at 6:33
jonathannahjonathannah
144
add a comment |
I am working on a project and want to have infinite horizontal scrolling for cells that each contain a thumbnail and some text. I have everything mostly working. However, I can not get text to wrap. The css and html are below. The first two items in the scroll box have text that should wrap, but overflows.
This is the style (cell 2 is only for demo to alternate background colors):
.container
display: flex;
flex-direction: row;
padding: 10px;
height: 10%;
overflow-x: auto;
white-space: nowrap;
.cell
background: #818181;
flex: fit-content;
padding: 10px;
width: 220px;
height: 8%;
display: inline-block;
.cell2
background: #f44336;
flex: fit-content;
padding: 10px;
width: 220px;
height: 8%;
display: inline-block;
.data
justify-content: center;
word-wrap: break-word;
<div>
<h2>Scroll Test</h2>
<div class="container">
<div class="cell">
<a href= "#">
<span class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"></span>
<span class="data"> <h3>Some text here</h3></span>
</a>
</div>
<div class="cell2">
<a href= "#">
<span class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"></span>
<span class="data"> <h3>Some text here that will over flow</h3></span>
</a>
</div>
<div class="cell">
<a href= "#">
<span class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"></span>
<span class="data"> <h3>Some text here</h3></span>
</a>
</div>
<div class="cell2">
<a href= "#">
<div class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"> </div>
<div class="data"> <h3>Some text here</h3></div>
</a>
</div>
<?php } ?>
</div>
</div>Link to fiddle: https://jsfiddle.net/jonathannah/3rxcktpm/29/
html css
edited Nov 14 '18 at 7:33
Viira
2,348426
asked Nov 14 '18 at 6:33
jonathannahjonathannah
144
Do you mean theh3-text inside the first.cell2? In that case, it's because of thewhite-space: nowrapthat gets inherited from your.containerstyles. Changing it towhite-space: normalwould fix that
– Michael
Nov 14 '18 at 6:57
Perfect. Thanks!
– jonathannah
Nov 14 '18 at 7:03
add a comment |
I am working on a project and want to have infinite horizontal scrolling for cells that each contain a thumbnail and some text. I have everything mostly working. However, I can not get text to wrap. The css and html are below. The first two items in the scroll box have text that should wrap, but overflows.
This is the style (cell 2 is only for demo to alternate background colors):
.container
display: flex;
flex-direction: row;
padding: 10px;
height: 10%;
overflow-x: auto;
white-space: nowrap;
.cell
background: #818181;
flex: fit-content;
padding: 10px;
width: 220px;
height: 8%;
display: inline-block;
.cell2
background: #f44336;
flex: fit-content;
padding: 10px;
width: 220px;
height: 8%;
display: inline-block;
.data
justify-content: center;
word-wrap: break-word;
<div>
<h2>Scroll Test</h2>
<div class="container">
<div class="cell">
<a href= "#">
<span class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"></span>
<span class="data"> <h3>Some text here</h3></span>
</a>
</div>
<div class="cell2">
<a href= "#">
<span class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"></span>
<span class="data"> <h3>Some text here that will over flow</h3></span>
</a>
</div>
<div class="cell">
<a href= "#">
<span class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"></span>
<span class="data"> <h3>Some text here</h3></span>
</a>
</div>
<div class="cell2">
<a href= "#">
<div class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"> </div>
<div class="data"> <h3>Some text here</h3></div>
</a>
</div>
<?php } ?>
</div>
</div>Link to fiddle: https://jsfiddle.net/jonathannah/3rxcktpm/29/
html css
edited Nov 14 '18 at 7:33
Viira
2,348426
asked Nov 14 '18 at 6:33
jonathannahjonathannah
144
I am working on a project and want to have infinite horizontal scrolling for cells that each contain a thumbnail and some text. I have everything mostly working. However, I can not get text to wrap. The css and html are below. The first two items in the scroll box have text that should wrap, but overflows.
This is the style (cell 2 is only for demo to alternate background colors):
.container
display: flex;
flex-direction: row;
padding: 10px;
height: 10%;
overflow-x: auto;
white-space: nowrap;
.cell
background: #818181;
flex: fit-content;
padding: 10px;
width: 220px;
height: 8%;
display: inline-block;
.cell2
background: #f44336;
flex: fit-content;
padding: 10px;
width: 220px;
height: 8%;
display: inline-block;
.data
justify-content: center;
word-wrap: break-word;
<div>
<h2>Scroll Test</h2>
<div class="container">
<div class="cell">
<a href= "#">
<span class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"></span>
<span class="data"> <h3>Some text here</h3></span>
</a>
</div>
<div class="cell2">
<a href= "#">
<span class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"></span>
<span class="data"> <h3>Some text here that will over flow</h3></span>
</a>
</div>
<div class="cell">
<a href= "#">
<span class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"></span>
<span class="data"> <h3>Some text here</h3></span>
</a>
</div>
<div class="cell2">
<a href= "#">
<div class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"> </div>
<div class="data"> <h3>Some text here</h3></div>
</a>
</div>
<?php } ?>
</div>
</div>Link to fiddle: https://jsfiddle.net/jonathannah/3rxcktpm/29/
.container
display: flex;
flex-direction: row;
padding: 10px;
height: 10%;
overflow-x: auto;
white-space: nowrap;
.cell
background: #818181;
flex: fit-content;
padding: 10px;
width: 220px;
height: 8%;
display: inline-block;
.cell2
background: #f44336;
flex: fit-content;
padding: 10px;
width: 220px;
height: 8%;
display: inline-block;
.data
justify-content: center;
word-wrap: break-word;
<div>
<h2>Scroll Test</h2>
<div class="container">
<div class="cell">
<a href= "#">
<span class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"></span>
<span class="data"> <h3>Some text here</h3></span>
</a>
</div>
<div class="cell2">
<a href= "#">
<span class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"></span>
<span class="data"> <h3>Some text here that will over flow</h3></span>
</a>
</div>
<div class="cell">
<a href= "#">
<span class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"></span>
<span class="data"> <h3>Some text here</h3></span>
</a>
</div>
<div class="cell2">
<a href= "#">
<div class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"> </div>
<div class="data"> <h3>Some text here</h3></div>
</a>
</div>
<?php } ?>
</div>
</div>
.container
display: flex;
flex-direction: row;
padding: 10px;
height: 10%;
overflow-x: auto;
white-space: nowrap;
.cell
background: #818181;
flex: fit-content;
padding: 10px;
width: 220px;
height: 8%;
display: inline-block;
.cell2
background: #f44336;
flex: fit-content;
padding: 10px;
width: 220px;
height: 8%;
display: inline-block;
.data
justify-content: center;
word-wrap: break-word;
<div>
<h2>Scroll Test</h2>
<div class="container">
<div class="cell">
<a href= "#">
<span class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"></span>
<span class="data"> <h3>Some text here</h3></span>
</a>
</div>
<div class="cell2">
<a href= "#">
<span class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"></span>
<span class="data"> <h3>Some text here that will over flow</h3></span>
</a>
</div>
<div class="cell">
<a href= "#">
<span class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"></span>
<span class="data"> <h3>Some text here</h3></span>
</a>
</div>
<div class="cell2">
<a href= "#">
<div class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"> </div>
<div class="data"> <h3>Some text here</h3></div>
</a>
</div>
<?php } ?>
</div>
</div>html css
html css
edited Nov 14 '18 at 7:33
Viira
2,348426
asked Nov 14 '18 at 6:33
jonathannahjonathannah
144
edited Nov 14 '18 at 7:33
Viira
2,348426
asked Nov 14 '18 at 6:33
jonathannahjonathannah
144
edited Nov 14 '18 at 7:33
Viira
2,348426
edited Nov 14 '18 at 7:33
Viira
2,348426
edited Nov 14 '18 at 7:33
Viira
2,348426
2,348426
asked Nov 14 '18 at 6:33
jonathannahjonathannah
144
asked Nov 14 '18 at 6:33
jonathannahjonathannah
144
asked Nov 14 '18 at 6:33
jonathannahjonathannah
144
144
Do you mean theh3-text inside the first.cell2? In that case, it's because of thewhite-space: nowrapthat gets inherited from your.containerstyles. Changing it towhite-space: normalwould fix that
– Michael
Nov 14 '18 at 6:57
Perfect. Thanks!
– jonathannah
Nov 14 '18 at 7:03
add a comment |
Do you mean theh3-text inside the first.cell2? In that case, it's because of thewhite-space: nowrapthat gets inherited from your.containerstyles. Changing it towhite-space: normalwould fix that
– Michael
Nov 14 '18 at 6:57
Perfect. Thanks!
– jonathannah
Nov 14 '18 at 7:03
Do you mean the
h3-text inside the first .cell2? In that case, it's because of the white-space: nowrap that gets inherited from your .container styles. Changing it to white-space: normal would fix that– Michael
Nov 14 '18 at 6:57
Do you mean the
h3-text inside the first .cell2? In that case, it's because of the white-space: nowrap that gets inherited from your .container styles. Changing it to white-space: normal would fix that– Michael
Nov 14 '18 at 6:57
Perfect. Thanks!
– jonathannah
Nov 14 '18 at 7:03
Perfect. Thanks!
– jonathannah
Nov 14 '18 at 7:03
add a comment |
1 Answer
1
active
oldest
votes
Just addh3 white-space: normal . The children of .containerinherit white-space: nowrap, which causes the problem.
Another issue in your html is the h3 inside a span, which is invalid. You shouldn't use block elements inside inline elements. You can change it to a div give it the style display: inline
answered Nov 14 '18 at 7:10
MichaelMichael
269111
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
);
);
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%2f53294345%2fcss-issues-with-word-wrapping-in-an-infiinite-scrolling-div%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Just addh3 white-space: normal . The children of .containerinherit white-space: nowrap, which causes the problem.
Another issue in your html is the h3 inside a span, which is invalid. You shouldn't use block elements inside inline elements. You can change it to a div give it the style display: inline
answered Nov 14 '18 at 7:10
MichaelMichael
269111
add a comment |
Just addh3 white-space: normal . The children of .containerinherit white-space: nowrap, which causes the problem.
Another issue in your html is the h3 inside a span, which is invalid. You shouldn't use block elements inside inline elements. You can change it to a div give it the style display: inline
answered Nov 14 '18 at 7:10
MichaelMichael
269111
add a comment |
Just addh3 white-space: normal . The children of .containerinherit white-space: nowrap, which causes the problem.
Another issue in your html is the h3 inside a span, which is invalid. You shouldn't use block elements inside inline elements. You can change it to a div give it the style display: inline
answered Nov 14 '18 at 7:10
MichaelMichael
269111
Just addh3 white-space: normal . The children of .containerinherit white-space: nowrap, which causes the problem.
Another issue in your html is the h3 inside a span, which is invalid. You shouldn't use block elements inside inline elements. You can change it to a div give it the style display: inline
answered Nov 14 '18 at 7:10
MichaelMichael
269111
answered Nov 14 '18 at 7:10
MichaelMichael
269111
answered Nov 14 '18 at 7:10
MichaelMichael
269111
answered Nov 14 '18 at 7:10
MichaelMichael
269111
269111
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.
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%2f53294345%2fcss-issues-with-word-wrapping-in-an-infiinite-scrolling-div%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
Do you mean the
h3-text inside the first.cell2? In that case, it's because of thewhite-space: nowrapthat gets inherited from your.containerstyles. Changing it towhite-space: normalwould fix that– Michael
Nov 14 '18 at 6:57
Perfect. Thanks!
– jonathannah
Nov 14 '18 at 7:03