I was trying to implement horizontal scrolling, after a lot of searching I found the solution using
.wrapper{
overflow: auto;
}
.innerWrapper{
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
This gave me the solution I needed for adding new div elements which adjust horizontally, But what if I have a huge word like #tagsomething, I want the word to be broken like
.tagLink{
word-wrap: break-word;
}
this doesn't work as I understand that I am using nowrap on the whole container, is there a way around this?
Check out the code: https://jsfiddle.net/v5s5ema8/2/
You can simply override it on the child elements.
.tags {
white-space: normal;
}
Updated fiddle.
Related
I am having trouble producing an ellipsis effect when a series of span children overflows its parent container. I have set up the parent container to have all the necessary attributes for an ellipsis (nowrap, display, hidden overflow, and of course text-overflow as ellipsis) but with my current setup, my spans seem to not want to ellipse on an overflow.
...The elements are structured like this
<div class="outer">
<span class="genre">Adventure</span>
<span class="operator">OR</span>
<span class="genre"> Comedy</span>
</div>
...And the corresponding CSS:
.outer {
max-width: 90px;
overflow: hidden;
white-space: nowrap;
display: inline-block;
text-overflow: ellipsis;
}
.operator {
width: 20px;
height: 22px;
float: left;
}
.genre {
float: left;
}
While the desired effect is an ellipsis, what I'm seeing is the overflowed elements wrapping around instead. I was under the impression that any sort of wrapping would be prevented through my display as inline-block, as well as nowrap, but that doesn't seem to be the case here. This seems to be due to floating the elements, but what I've been looking for is a solution that includes these floats in this case. Here is a jsfiddle of my current situation: https://jsfiddle.net/k91wzsq3/2/ - And The screenshot below is the effect I'm looking for.
Any help would be greatly appreciated, thank you in advance!
You don't need to use the float property in this case, it will just mess up your element. You only needed to tell the .outer element that it is going to be inline, just like you did but then by adding the floats it broke everything. You only need this on you CSS
.outer {
max-width: 90px;
overflow: hidden;
white-space: nowrap;
display: inline-block;
text-overflow: ellipsis;
}
Fiddle here https://jsfiddle.net/zgranda/0Ls6fw4j/14/
Please refer the fiddle for details. Bottom line is that the style
.cutty {
display: flex;
flex: 1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
doesn't seem to force the dots when the button gets clicked., despit ethe fact that the enclosing parent has the style
.left {
display: flex;
flex: 1;
overflow: hidden;
}
The aim is to ensure that the pink cutty gets most of the width in purple left while the brown fixies stay at the same width. Of course, I want to eliminate the wrap at white space and cut off the overflowing part.
The way my googling suggested is to make sure that the encapsulating parent is set to hide the overflow too. However, as show in the fiddle, that doesn't happen. There was also some mentioning about minimum width set to zero. Trying that gave nothing, though.
What do I miss?
If you remove display: flex; from .cutty is that what you wish to achieve?
I have table that sometimes have long strings as values.
How can i show the entire content of a tablecell if the overflowing content his hidden?
I'm thinking the cell should be expand while overlapping adjacent cells without displacing them.
Currently im using this css:
table{
table-layout: fixed;
margin-top: 24px;
th{
white-space: normal;
word-wrap: break-word;
}
td{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
td:hover{
overflow: visible;
z-index: 1;
background-color: grey;
}
}
This does make the overflowing text visible and overlapping adjacent cells. But the background/cell wont follow.
Thanks!
This is what I got for your situation: jsFiddle
First of all, I changed the css so that the table selector does not contain the other selectors. (note that this is not needed if you are using SASS or LESS as pointed out in the comments)
table{
table-layout: fixed;
margin-top: 24px;
} <--- place it here instead of at the end of the css rules for the table
th{
white-space: normal;
word-wrap: break-word;
}
And then I also adjusted the css rules for 'td' and 'td:hover':
td{
max-width : 50px;
white-space : nowrap;
overflow : hidden;
}
td:hover{
overflow: visible;
z-index: 2;
background-color: grey;
max-width:initial;
}
Hope this is what you wanted to achieve.
EDIT
After some comments and knowing you don't want the adjacent cells to move, I found this jsFiddle (this one is still a bit jumpy on hover, so maybe someone else knows how to fix this; I don't see how to solve that right now)
I'm working on a header that's intended to overflow. It's got white-space: nowrap rule applied in order to prevent breaking the text into two or more lines.
The problem is, the viewport now stretches to fit the text and then the page is scrollable on the x-axis. Applying overflow-x: hidden hides the scrollbar, but it's still possible to scroll the page on mobile, and on desktop through middle mouse button drag.
I know I could use position: fixed, but that's not a solution for me. I want the header to stay where it is.
Here's a fiddle with all my attempts so far.
Ok, try applying this:
CSS:
.wrapper {
position: absolute;
width: 98%;
overflow: hidden;
}
.text {
font-size: 500%;
white-space: nowrap;
display: block;
width: 100%;
float: left;
}
edit: oh, and remove overflow-x: hidden; from html,body
I would like to setup a horizontal container that holds multiple (smaller) columns within it. I have the following setup:
http://jsfiddle.net/f464W/1/
As you can see, when you resize the window, the .column containers just stack vertically when the width of the window is too small to contain them all.
Shouldn't
overflow-x: hidden
Stop the .column class from being displayed when they run off the side of .container?
Add white-space: no-wrap the .container
http://jsfiddle.net/feitla/f464W/17/
.container {
max-height: 600px;
width: 100%;
margin-top: 100px;
background: red;
padding: 0;
overflow-y: hidden;
overflow-x: hidden;
white-space: nowrap;
}
With overflow-x: hidden will hide what exceeds on the right of your div. But the natural behaviour of the divs are to wrap to the line below when they're out of space, therefore nothing exceeds.
You need to make the divs not wrap. if you add white-space: nowrap to your container CSS they will only stack horizontally.
You can add float: left; to .column and that should give you the desired effect. You'll then have to play with margin if you want to maintain the spacing you had between the columns.