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
Related
I have looked around alot but i cant figure out what is going on here.
So i have a table with 2 td's on the first row.
left td has a image and should be h:200px and w:200px.
right td has some text and should be h:200px and w:430px.
So the total should be w:630px and h:200px but somehow if i inspect the tr its h:200px and w:630.4px so 0.4 too many which i cant figure out where its from.
i have the margin and padding set to 0px.
#logo {
height: 200px;
width: 200px;
display: inline-block;
}
#headerText {
height: 200px;
width: 430px;
background-color: #660066;
display: inline-block;
}
picture with inspecter: https://imgur.com/d4nVbq9
You need to add both your HTML and CSS codes so that we can see the result and inspect it. But from your explanation, I would say there are two things to consider:
If you want to control the size of a cell, you need to wrap the content in a div or other block elements.
Try adding overflow: hidden; and white-space: nowrap;to your table cell. Use either one that works for you.
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'm building a list by using a table:
As you can see, the long url, makes the table wider. This is what I want to prevent.
I've used a couple of things like
table { table-layout: fixed; width: 100%; }
and
td.title { white-space:nowrap;overflow: hidden; width: 200px; }
But this did not work.
Also, maybe I need to note that my table is dynamically being made. But this should not be a problem.
Any suggestions?
Just cut the url text (not the href value) at a certain character. With JavaScript you can do that with str.substring(5, 0); where 5 is the number of characters you want left.
This is default behaviour of a table cell. It will always stretch to fit the content's dimensions. width on a table cell tends to behave more like min-width
The fix is to not style the td, but instead its contents only.
Try something like:
td.title a {
display: inline-block;
white-space: nowrap;
overflow: hidden;
width: 200px;
}
I built four div boxes with content in them. First of all, there was blindtext into it and there were no problems. But now when I want to put my content into the boxes and I put some text into the first box, for example, the other three are going down by the same amount.
The second thing is, is there some way how I can make the text more compact? Like the other three boxes where the blind text is. Because in the first one there is much room between couple words. I heard something about css break? But I don't know if it's the right one.
.skillcontainer {
max-width: 23%;
min-width: 200px;
display: inline-block;
position: relative;
margin-left:1.4em;
}
Here you can see what I mean. And also with the text for example if you make the window bigger you see that under 22% there is empty space.
No need to float them...you just have to add
.wrapper {vertical-align:top; }
to your code...as the internal items are inline-block.
JS FIDDLE
Float 'em!
.skillcontainer {
max-width: 23%;
min-width: 200px;
display: block;
position: relative;
margin-left: 1.4em;
float: left;
}
Updated fiddle.
I was looking to implement the following design to the HTML/CSS.
I have got problems with the text overflow in the column. Currently the table column width is given in the percentage format so that the column width will change depending on the screen size, but there is a minimum width too. In the first text column, you can see that the content is extending and produced a second line due to the long size. How to avoid this problem using the text overflow? Or any other solution? Also, you can see that a set of icons are appearing in the same row when the mouse hover takes place. At this time, the text below the icons should hide and it should be shortened as shown in the design. Can you advise me to get a solution to this problem? I have tried text-overflow: ellipsis. But I'm getting problem when the screen width changes. Since I don't have a minimum width due to the variable column width, how to cut short the text in this field? Also in the hover case ??
Please let me know if you want to know anything else.
If you don't want the text to split in multiple rows, add white-space:nowrap rule.
Then, set a max-width for the cell.
For the icons, position them in absolute to the right, with a z-index higher then the text. You'll have to add a relative position to the containing cell also.
To keep them visible over text, i've added a background color (and some left padding).
EDIT: Fix for Mozilla
Mozilla seems to ignore position:relative; for td elements.
To fix it, you've to wrap the td contents inside another div, and apply this style
.tables td {
font-weight: 400;
font-size: 13px;
border-bottom: 1px solid #E1E1E1;
line-height: 38px;
text-align: right;
white-space: nowrap;
max-width: 200px; /* just an example */
}
.tables td > div {
overflow: hidden;
width:100%;
position: relative;
}
.linkFunctions {
display: none;
padding-top: 14px;
position: absolute;
right: 0;
z-index: 999;
background-color: #FFF9DC;
padding-left: 3px;
width: 100%;
max-width: 120px; /* just an example */
text-overflow: ellipsis;
overflow: hidden;
}
It's not exactly what you want (regarding the elipsis) but comes very close.
For the <a> inside the <td> add
td a{
display:block;
overflow:hidden;
width:100%;
white-space:nowrap;
}
(You might need to add a class to them to more easily target them and not ALL <a> inside <td>s).
And regarding the hover. Float the div.linkFunctions right, add the yellow background to it and it will look like it cuts the text accordingly.
All of those require a width to be set, which doesn't make tables fluid as they are intended to be. Use this: http://jsfiddle.net/maruxa1j/
That allows you to automatically set widths on <td> as percentages and the :after automatically sizes the overflowed <span>