I want distribute some links in columns. I use this css:
.cols{
float: left;
width: 25%;
white-space: nowrap;
}
HTML:
<div class="CRMP_WP_QUICKADS_cols">
text...
</div>
The image show the resulting output:
How can avoid overlapping?
Possible solutions:
You could hide the last part: overflow: hidden; text-overflow:
ellipsis;
You could increase the width of the divs
Set overflow to hidden to cutoff any content that exceeds the width of the column:
.cols {
/* ... */
overflow:hidden;
text-overflow:ellipsis; /* Hint that some text is hidden */
}
3 options
Increase width
Remove the width declaration on the divs (if you want them to expand to fit the text)
set overflow: hidden on the div if you want to hide the text
You must increase the width of the columns to compensate for the overflowing text.
Related
I'm trying to make a two column CSS table (tried HTML table too) with one row where the first column is one line of text and it expands to fit the content. The second column needs to be a single line of text that is right justified and expands left until it hits the first column and then becomes an ellipsis.
This first column is working with white-space: nowrap;. The second column is the issue:
When the content is longer than the second column max width, it will wrap. Once I add white-space: nowrap; it overflows and ignores the width, max-width and overflow: hidden;
Here is a JSFiddle showing what I'm getting vs. what I'm trying to get. Thanks!
https://jsfiddle.net/esodell1/oq59jkr3/10/
UPDATE
Thanks for the responses, but I found a way to accomplish this using flex box!
https://jsfiddle.net/esodell1/jdykzv5m/13/
So this is how the text-overflow technique works. There needs to be a defined width of it's parent or a closest parent. You'll need to defined a width for your cell such as:
&:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 85%;
text-align: right;
}
But you'll also have to limit your table since table naturally tries to expand as much as the content in its child requires by using table-layout:
.table {
display: table;
padding: 0.25rem;
table-layout: fixed;
width: 100%;
}
This will make the right column create the ellipsis when the cell reaches 85% of its available width. The problem you'll be faced with is dealing with the left column because you also have no-wrap set on it so that column might actually exceed 15% width and overlap with the right. The issue is both your column is trying not to wrap and fighting for table space, you'll need to apply the same text-overflow technique on the left column. See the the previous and last example here:
https://jsfiddle.net/bhL6sx0g/
To be honest if you're dealing with many columns with dynamic content like this that you don't want wrapping you might want to add a layer of JS on top to do some of your sizing for you else the best option is delegate the actual widths such as a 15/85 split and stick to it.
Edit:
Give width units in vw(viewport width). Notice changes in scss of table(width), first-child( width, min-width) and last-child(width, max-width).
This vw will behaved strangely in jsfiddle, try in .html only.
.table {
display: table;
padding: 0.25rem;
width:90vw;
.row {
display: table-row;
.cell {
display: table-cell;
border: 1px solid gray;
padding: 0.25rem;
&:first-child {
white-space: nowrap;
width:20vw;
min-width:20vw;
}
&:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 70vw;
max-width: 70vw;
text-align: right;
}
}
}
}
Previous
By max-width:100% it can stretch to take full size of parent. You need limit it to some percentage or pixels to achieve desired effect.
Removed width:100% as it was useless and changed max-width:200px
&:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* width: 100%; */
max-width: 200px;
text-align: right;
}
If I were to have a div with a specified width, how would I prevent a new line when the content exceeds the parent div's width?
Here is my HTML code:
<div style="width: 200"><p>Verrrrrrry loooooooong pppppppp ellllemmmmmmmmentttt</p></div>
Any help would be appreciated.
Thanks!
You could simply use:
div {
white-space: nowrap;
overflow: hidden; /* assuming you don't want the <div> to stretch to accommodate */
} /* the width of the text */
div {
width: 300px;
white-space: nowrap;
overflow: hidden;
border: 2px solid rgba(0,0,0,0.5);
}
<div>This element has some text longer, by far, than the width of the page in which it is contained; it would be lorem ipsum but, honestly, I'd rather spend a few moments typing randomly, but continuously, than go find myself some of that lorem-goodness...</div>
References:
white-space (MDN).
white-space (W3.org, CSS 2.1).
Use white-space: nowrap:
div{
overflow: hidden; /* Prevent text from overflowing div */
white-space: nowrap; /* Prevent text from using more than one line */
}
Try this CSS:
overflow:hidden;
white-space:nowrap;
Should do the trick
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.
I am trying to make a div featuring thumbnails to have a set width (330px) and set height (100px), and make it so the content is arranged horizontally, so that a horizontal scroll bar is used to view the content.
Please see the row of thumbnails in the bottom right corner of my website: http://stevenlloydarchitecture.co.nz/building.html
I want to make it so that only four of the thumbnails are visible, and you scroll horizontally to see the others.
However when I try to specify width the thumbnails get moved below each other (as is currently displayed). I tried making a parent Div (with id "slider" in my example) to set the width and height, and have tried as many combinations of specifying width,height and overflow to the divs on the hope of forcing a horizontal scroll but nothing has worked and I am completely stumped. Thanks in advance for any tips.
You can add the following styles to the #slider div to get only a horizontal scrollbar that scrolls through the images. Afterwards, its just sizing and positioning the div. The white-space: nowrap property tells the images not to wrap to next "lines".
#slider {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
#thumbset {
overflow: visible;
}
You can try the following css :
#slider {
width: 330px;
overflow-x: scroll;
overflow-y: hidden;
}
#thumbset {
width: 550px;// whatever width you want
}
Use this code:
<div style="width: 300px; height: 40px; border: 1px solid black; overflow: auto; white-space: nowrap; font-size: 14px">
Here's a random text .............
</div>
see how this code works in this fiddle, it's an easy way : add horizontal scroll bar
I have a page with the following structure:
div.wrapper > div.content > div.item + div.item
The wrapper has a width of 320px, whereas the two div.item come out to around 600px. I need those two to be displayed inline (right now they are display: inline-block;, and have the wrapper's contents scroll horizontally. When I set the div.content width to auto, it takes the width of the wrapper (320px). Setting the width to 200% obviously gets the horizontal scrolling to work, but how do I get div.content to take on the width of its contents to allow for horizontal scrolling?
Note: The wrapper is set to a fixed width and height and has overflow-y: hidden and overflow-x: scroll set, because I do not want vertical scrolling-- only horizontal.
JSFiddle with an example:
http://jsfiddle.net/kh5k7/
As you can see, the red divs will vertically stack. Changing the .content width to 200% (or some value) will cause horizontal scrolling to occur properly. I want this done automatically though, because I have no clue how many elements are going to be in the .content div before hand.
Use white-space:nowrap; on .content
.content{
width: auto;
white-space:nowrap;
}
http://jsfiddle.net/kh5k7/1/
You can have something like this:
.wrapper {
overflow-x: auto;
overflow-y: hidden;
}
.content {
width: auto;
white-space: nowrap;
}
.item {
display: inline-block;
}