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?
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/
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;
}
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.
I have a table with a column width: auto. It contains a text, which is shortened by the ellipsis when it doesn't fit a column.
Now, I want to append a number besides the text. However, I still want the text to be shortened when it is too long, but the number has to be visible anyway. Below are a few illustrations of what I am trying to accomplish.
It is also required that the number stays near the text at all times. I can make it work when the number is at the fixed position by setting the text's div.text { width: 95% }, but this is not entirely satisfactory.
Please, take a look at JSFiddle to get the idea: http://jsfiddle.net/ZRZfk/. The JSFiddle does not work as I would like it to because the width of the text is fixed.
Is it possible to solve this problem without using JS?
Use max-width instead width Demo
I think replacing width:95% with max-width:95% does what you want? Demo here
.text {
max-width:95%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
}
You can use trick with ::before and width thgough almost the whole cell.
.text::before{
content:'… (1)';
position: absolute;
display: inline-block;
color: gray;
left: 70%;
background: pink;
}
JSFiddle
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.