I'm trying to use the white-space: nowrap in CSS to allow scrolling on overflow.
However, this prevents the innerHTML inside the divs to wrap.
If I remove the white-space: nowrap, the innerHTML works as it should but the divs don't scroll, instead they go onto new line.
With no-wrap:
Without no-wrap:
Leave the
white-space: nowrap;
in the outer div and in each inner div:
white-space: normal;
for example:
.outer-div{
white-space: nowrap;
}
.outer-div>div{
white-space: normal;
}
Here's a working example of a few div elements, with a horizontal scroll when they overflow their parent node, which is a section in this demo.
In the below demo, I thought it best to use flexbox, which gives some nice benefits.
section{
display: flex;
overflow: hidden;
overflow-x: auto;
flex-wrap: nowrap;
border: 1px solid green;
height: 150px;
}
div{
flex: 400px;
min-width: 200px;
margin: 5px;
padding: 5px;
background: silver;
}
<section>
<div>some very very long text which should probably break because it is very long.</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
Related
I am trying to break a text by word if possible, and if not - break anyways so the layout isn't dying. This works by default in google chrome and wraps properly, but it doesn't work in firefox.
.a {
width: 200px;
word-wrap: break-word;
display: inline-block;
white-space: normal;
word-break: break-word;
}
.a>div {
text-align: left;
display: inline-block;
}
<div class="a">
<div>
achrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachri
</div>
</div>
http://jsfiddle.net/prswjktc/12/
The problem can be solved by adding max-width: 100%; in the case in the fiddle but I am looking for alternative solutions. (I can't remove the inner div either).
Here we go :-)
Put your words (or terms) into <span>s.
set to
display: inline-block (so they get all the width they need)
max-width: 100%; overflow: hidden (so, yes, there's a chop-off, if column exceed)
overflow-wrap: break-word (so he breaks if there's a chop-off
legacy backup (think -moz-whatever): word-wrap: break-word
code:
span
display: inline-block
max-width: 100%
overflow-wrap: break-word
word-wrap: break-word
full Codepen
You can use the CSS3 property overflow-wrap, which may be what you're looking for. Read more at MDN, including about browser support, but the gist is that "In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing."
Note also that the width of 200px you have is not on the div that contains the long text but on the .a parent div, and that the div with the long text has display: inline-block, so currently its width will be determined by its content and it will spill out of the fixed-width .a parent div. To fix this, either give the inner div (.a > div) an explicit width (could be 200px, or 100%, or whatever your layout actually requires), or make the inner div display as a block by removing display: inline-block and/or setting display: block explicitly.
Here's a working snippet, in which I've left .a > div as an inline-block, and created another div .b where .b > div is a block:
.a {
width: 200px;
word-wrap: break-word;
display: inline-block;
white-space: normal;
word-break: break-word;
}
.a>div {
text-align: left;
width: 100%;
display: inline-block;
overflow-wrap: break-word;
}
.b {
width: 200px;
display: inline-block;
white-space: normal;
}
.b>div {
text-align: left;
display: block;
overflow-wrap: break-word;
}
<div class="a">
<div>
achrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachri
</div>
</div>
<div class="b">
<div>
achrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachri
</div>
</div>
Add word-break:break-all; to the child selector (.a > div)
https://jsfiddle.net/f4bdx7z9/1/
.a {
width: 200px;
word-wrap: break-word;
display:inline-block;
white-space:normal;
word-break:break-word;
}
.a > div {
text-align:left;
display:inline-block;
word-break:break-all;
}
<div class="a">
<div>
achrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachri
</div>
</div>
I want to have various tags in a container and have them display ellipsis when the tag text is too big (i.e. when it would stretch beyond the width of the container). The problem I am facing is that in Safari, the ellipsis are displayed even though the tag has space to display the full content.
This is the code that shows what I'm trying to achieve:
.tag {
height: 30px;
background: #F67;
line-height: 30px;
display: block;
float: left;
max-width: calc(100% - 20px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 5px;
margin: 5px 5px 0;
border-radius: 16px;
}
.content {
float: left;
max-width: calc(100% - 20px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.icon {
float: right;
background: blue;
width: 20px;
text-align: center;
color: white;
text-decoration: none;
}
.container {
border: 2px solid blue;
width: 300px;
height: 400px;
padding: 10px;
}
<div class="container">
<div class="tag">
<span class="content">Some tag</span>
X
</div>
<div class="tag">
<span class="content">Some tag</span>
X
</div>
<span class="tag">
blahbsalkfnewijfnewifbwiefnbijfneifjnweifniwjenfewi
</span>
<div class="tag">
<span class="content">Some tags</span>
X
</div>
</div>
If you're running the snippet above in Safari(v8.0.8 is the one I am using) you can see the last tag shows ellipsis even though it still has space to stretch and display the full text. If you can't see what I am talking about here is a screenshot of the issue:
text-overflow problem on safari image
Small mention about the 'X' is that it is intended as an icon someone could click on and delete the tag, but that functionality is not the subject of this question.
I'm using this trick: adding a non-break space right after the text. You can add it directly into your html, like <div class="ellipsis">Test </div> or you can use the :after pseudo element. Here's the .ellipsis class that I'm using:
.ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.ellipsis:after {
content: "\0000a0";
display: inline-block;
width: 0;
}
The use of :after has another advantage, it's hidden by setting width: 0;, so you won't notice a larger gap between this element and the thing next to it (another element or a border).
When you remove the following lines from your .content element it works fine by me.
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
example: http://codepen.io/WartClaes/pen/ZQxaKW?editors=1100
Edit: although when looking further I see that you don't always use the same HTML structure? Which results in the double text overflow declaration. Isn't it possible to always use the same structure?
You need to add a "width" for the text, down to the text-overflow:
width: 100%; /Or the size you need/
It works for me in the safari 13.
I have a div "container", say 400px width, with a left-floated divs inside — "box" 100px width. There are six of "box" divs so their summary width is larger than 400px which causes that line of divs to get wrapped and I get two lines, with 4 and 2 elements each. How can I make these 6 divs go in one row, one line instead of two?
You simply need white-space: nowrap on the parent element with display: inline-block on the children. Live demo here (click).
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
css:
.container {
width: 400px;
background: black;
white-space: nowrap;
overflow: scroll;
}
.container > div {
height: 50px;
width: 100px;
background: #555;
display: inline-block;
margin: 10px;
}
Assuming you continue using float: left;... If your container has a set width of 400px, then your total sum of children divs can't surprass 400px wide either. This includes any padding, margin, or border space as well.
To answer your question simply, there are several ways...
Make the container 600px wide instead of 400px...
Make the child elements 66px wide instead of 100px...
A better option is to use percentages...
Make the child elements 16.666667% wide.
You need to give display: inline-block to the children of container and also give white-space: nowrap to make them flow horizontally. Here is the CSS
#Container {
width: 400px;
border: 1px solid black;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.inside {
width: 100px;
height: 300px;
border: 1px solid black;
display: inline-block;
}
and HTML
<div id="Container">
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
</div>
Here is the fiddle for your problem http://jsfiddle.net/sgaurav/vZLWQ/
hope it will help you
display:inline-block;
I have a div with
display:inline-block;
postion:relative;
inside a div with
display:block;
width:348px;
overflow:hidden;
When the contents of the inner div overflow, I want them to expand horizontally, not vertically. The contents of the inner div consists of thumbnails of photos
You just need to set white-space: nowrap on either of the divs (the property is inherited). (Source)
Sidenote: The inner div is not necessary for this to work.
Demo: JSFiddle
HTML
<div class="container">
<div>
<!-- Thumbnails -->
</div>
</div>
CSS
.container {
display: block;
width: 348px;
overflow: hidden;
white-space: nowrap;
}
.container div {
position: relative;
display: inline-block;
}
Ray Z!
Overflow does matters. So in order to write your css as just
overflow:"hidden"
you should use
overflow-x: hidden;
overflow-y: scroll;
Set the width and overflow-x as auto for the inner div
<div id = "outer">
<div id = "inner"></div>
</div>
#outer{
width: 400px;
height: 300px;
border: red thin dotted;
}
#inner{
margin: 15px;
height: 280px;
width: auto;
border: green thin solid;
overflow-x: auto;
}
Here is the fiddle http://jsfiddle.net/jgrgb/
How to create set of float:right divs one next to another and make them not wrap, no matter how much of them exists or how wide is any of them. If they together are wider than viewport, then x-scroll should appear.
Content inside those divs should wrap normally.
CSS only would be good.
Style the parent element with white-space: nowrap;, though this only works with display: inline (or display: inline-block;) elements. Given the following HTML:
<div id="parent">
<div class="child"></div>
<!-- there's quite a lot of these... -->
<div class="child"></div>
</div>
And the CSS:
#parent {
white-space: nowrap;
}
#parent .child {
display: inline-block;
/* there's some other CSS for aesthetics */
}
JS Fiddle demo.
Unfortunately I don't think there is a way of forcing float-ed elements to not wrap to a new line.
To preserve or, rather, force normal line-wrapping for descendant elements you'll have to explicitly over-ride the inheritance and set white-space: normal (as well as, possibly, define a width or max-width)
/* other CSS remains intact */
#parent .child {
display: inline-block;
/* irrelevant/aesthetic CSS */
white-space: normal;
max-width: 8em;
}
JS Fiddle demo.
Few elements: http://jsfiddle.net/thirtydot/A8duy/
Many elements: http://jsfiddle.net/thirtydot/A8duy/1/
HTML:
<div class="block-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
CSS:
.block-container {
text-align: right;
white-space: nowrap;
float: left;
width: 100%;
margin-bottom: 1em;
border: 1px solid red;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.block-container > div {
width: 50px;
height: 50px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
text-align: left;
white-space: normal;
border: 1px solid blue;
}