I'm trying to implement ellipsis and it's partially working - I am having one problem, when I hover on the very long work, it goes on top of the other words. I can't explain it very well, so here's a picture to show what exactly is happening:
Before hover:
After hover:
Here's my code:
.attachment td {
max-width: 300px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
}
.attachment td:hover {
overflow: visible;
white-space: normal;
}
<body>
<h1>The text-overflow Property</h1>
<p>Hover over the div below, to see the entire text.</p>
<div class="a">This is some long text that will not fit in the box.</div>
<table class="table table-striped table-hover">
<tbody>
<tr class="attachment hover-parent">
<td>
bhdvbcjkdsbjdhskbcsajdkggfbjaksbfisjkadzhfnisfjdkzvbcds,zhvmcneajsdkzvbdjszvbsdjzkvbdsjzkxvbdscjkvbdcxzjhvbdfshzjkxvbd
</td>
<td>
download
</td>
<td>
delete
</td>
</tr>
</tbody>
</table>
I feel like I'm missing out on one thing, I just can't pin point it. Any help?
Edit:
Here's my desired effect:
Edit:
What I needed was overflow-wrap: breakword;, thanks Raina
overflow-y is better
https://jsfiddle.net/2g1jham6/
<head>
<style>
.attachment td {
max-width: 300px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
}
.attachment td:hover {
overflow-x: hidden;
overflow-y: scroll;
white-space: pre-wrap;
}
</style>
</head>
<body>
<h1>The text-overflow Property</h1>
<p>Hover over the div below, to see the entire text.</p>
<div class="a">This is some long text that will not fit in the box.</div>
<table class="table table-striped table-hover">
<tbody>
<tr class="attachment hover-parent">
<td>
bhdvbcjkdsbjdhskbcsajdkggfbjaksbfisjkadzhfnisfjdkzvbcds,zhvmcneajsdkzvbdjszvbsdjzkvbdsjzkxvbdscjkvbdcxzjhvbdfshzjkxvbd
</td>
<td>
download
</td>
<td>
delete
</td>
</tr>
</tbody>
</table>
I've updated your code. The reason for the overlapping is because you have download and delete in their own td elements in the same table.
See below
.attachment {
max-width: 300px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
white-space: no-wrap;
width: auto;
}
.attachment:hover {
overflow: visible;
white-space: normal;
}
.option {
display: inline-block;
text-overflow: none;
}
<body>
<h1>The text-overflow Property</h1>
<p>Hover over the div below, to see the entire text.</p>
<div class="a">This is some long text that will not fit in the box.</div>
<table class="table table-striped table-hover">
<tbody>
<tr>
<td class="attachment"> bhdvbcjkdsbjdhskbcsajdkggfbjaksbfisjkadzhfnisfjdkzvbcds,zhvmcneajsdkzvbdjszvbsdjzkvbdsjzkxvbdscjkvbdcxzjhvbdfshzjkxvbd
</td>
<tr>
<td class="option">
download
</td>
<td class="option">
delete
</td>
</tr>
</tr>
</tbody>
</table>
Related
I have done quite a bit or searching on this but could not find a solution for my specific case. I am a beginner to CSS and the solution is probably really simple, I just cannot find it. So I am trying to create a table that has some columns with long text. I am able to show ellipsis to cut off too long text, but I would like to have the column resize and the ellipsis be updated if I reduce the size of the window, that also reduces the size of the table itself. Now the cell width remains the same and a horizontal scroll bar is shown, which I want to prevent. I know using fixed width for the column is probably the problem, but it is the only way I am able to show the ellipsis in the first place, without fixed width no ellipsis is shown. Here is a very simplified piece of code and the css that easily shows the problem:
<div class="tableFixHead">
<table>
<thead>
<tr>
<th>one</th>
<th>two</th>
</tr>
</thead>
<tbody>
<tr>
<td>
first column
</td>
<td>
<div class="overflowTableText">
the entire text that is way too long to show all at once
</div>
</td>
</tr>
</tbody>
</table>
</div>
.tableFixHead {
overflow: scroll;
height: 200px;
max-width: 50%;
}
.overflowTableText {
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
Any pointers are appreciated
One way to do this is to use #media query. Do something like this
.tableFixHead {
overflow: scroll;
height: 200px;
max-width: 50%;
}
.overflowTableText {
max-width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* add as many break points you want */
#media screen (max-width: 768px) {
.overflowTableText {
max-width: 200px;
}
}
#media screen (max-width: 576px) {
.overflowTableText {
max-width: 150px;
}
}
<div class="tableFixHead">
<table>
<thead>
<tr>
<th>one</th>
<th>two</th>
</tr>
</thead>
<tbody>
<tr>
<td>first column</td>
<td>
<div class="overflowTableText">
the entire text that is way too long to show all at once
</div>
</td>
</tr>
</tbody>
</table>
</div>
After fiddling around a bit I found a solution that works with multiple columns with ellipsis:
<div class="tableFixHead">
<table width="100%">
<thead>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
</thead>
<tbody>
<tr>
<td width="100px">
first column
</td>
<td class="overflowTableText"><span>
the entire text that is way too long to show all at once the entire text that is way too long to show all at once</span>
</td>
<td class="overflowTableText"><span>
the entire text that is way too long to show all at once the entire text that is way too long to show all at once</span>
</td>
</tr>
</tbody>
</table>
</div>
.tableFixHead {
overflow: scroll;
height: 200px;
border-collapse: separate;
width: 90%;
padding-right: 8px;
}
.overflowTableText {
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
Good day, Do you know bootstap? you can easily do that with bootsrap
https://getbootstrap.com/docs/4.1/content/tables/#responsive-tables
I have two HTML elements - one is div another is a table. both of them have two elements - div has p and table has td. Both of them have the same style.
Code:
.container {
display: flex;
flex-direction: row;
}
p, td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="container" style="width:100px; background-color: red">
<p width="50px">
Hello world
</p>
<p width="50px">
Hello world
</p>
</div>
<table style="background-color: green">
<tr width="100px">
<td width="50px">Hello World</td>
<td width="50px">Hello World</td>
</tr>
</table>
And their parent has 100px width. Actually, I want them to truncate if their size overflowed. For div, I get my desired output but in table, I do not get the same result. why does this happen? Is it because table has a different default style than div?
jsFiddle Demo
It happens because of the display property in table. You need to give a display: block to make ellipsis work, but it kind of removes how tables should work.
The better thing would be to wrap your td contents inside a div
and change your CSS.
Option 2 would be using max-width to your td`.
<td width="50px">
<div>Hello World</div>
</td>
CSS to:
td>div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 50px
}
OR Just add max-width
.container {
display: flex;
flex-direction: row;
}
p,
td>div,td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 50px;
}
<div class="container" style="width:100px; background-color: red">
<p width="50px">
Hello world
</p>
<p width="50px">
Hello world
</p>
</div>
<table style="background-color: green">
<tr width="100px">
<td width="50px">
<div>
Hello World</div>
</td>
<td width="50px">
<div>
Hello World</div>
</td>
<td width="50px">
Hello World
</td>
</tr>
</table>
To clip text with an ellipsis when it overflows a table cell, you will need to set the max-width CSS property on each td class for the overflow to work.
.container {
display: flex;
flex-direction: row;
}
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
td
{
max-width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="container" style="width:100px; background-color: red">
<p width="50px">
Hello world
</p>
<p width="50px" >
Hello world
</p>
</div>
<table style="background-color: green">
<tr>
<td>Hello World</td>
<td>Hello World</td>
</tr>
</table>
Instead of giving width to tr and td, give width to the table.
table {
background-color: green;
table-layout: fixed;
width: 100px;
}
td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<table>
<tbody>
<tr>
<td>Hello World</td>
<td>Hello World</td>
</tr>
</tbody>
</table>
I have a table where I'm trying to set the width of the first column to 20%, and wrap the content of its cells in ellipsis. My goal is to keep the 20% width fixed regardless of screen size and length of cell content. However, when the content of the cell is long, the cell streches beyond 20%. I did try table-layout: fixed, but for some reason it caused the browser to completely ignore my column width instructions. I'm working with Chrome, here's a jsfiddle:
http://jsfiddle.net/07sktof2/7/
Thanks.
You need to set a td max-width:
table {
font-size: 14px;
width: 100%;
border: 1px solid;
border-collapse: collapse;
}
td {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border: 1px solid black;
}
.first {
width: 20%;
padding-right: 20px;
}
.first .ellipsis {
width: 90%;
display:inline-block;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: nowrap;
}
<table>
<thead>
<tr>
<th>header 1</th>
<th>header 234567895678657</th>
</tr>
</thead>
<tbody>
<tr>
<td class="first">
<span class="ellipsis">
data long long long long long long long long long long long long cell
</span>
</td>
<td class="second">data 2</td>
</tr>
<tr>
<td class="first">short</td>
<td class="second">data 2</td>
</tr>
</tbody>
</table>
Try it Online!
I have a table with several columns. On chrome, the height of the table-cell (td) with an image inside varies when image height is in decimals (e.g. 76.54px) On firefox and IE this works fine and all tds have same height.
Please see the following fiddle:
https://jsfiddle.net/sstzg0rh/3/
Height of the column with image is few point less pixels then the other columns. This works fine on firefox and all tds have same height. Why chrome is showing different behavior with column height and how to fix this
<div class="container-row">
<div class="container">
<table>
<thead>
<tr>
<th>Title</th>
<th>Image</th>
<th>Text</th>
</tr>
</thead>
<tbody>
<tr>
<td>
ABCDEFG
</td>
<td>
<img src="http://via.placeholder.com/74x90" alt="This is a no image">
</td>
<td>
ABCDEFG
</td>
</tr>
<tr>
<td>
ABCDEFG
</td>
<td>
<img src="http://via.placeholder.com/74x90" alt="This is a no image">
</td>
<td>
ABCDEFG
</td>
</tr>
</tbody>
</table>
</div>
body {
line-height: 1.5;
}
img {
max-width: 72px;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
tr {
min-height: 80px;
width: 100%;
border-bottom: 1px solid red;
}
td {
white-space: nowrap;
vertical-align: top;
}
I thought your img elements was a inline elements that led to the problem.
The solution i thought was
img{
display:block;
}
i have a table with fixed-width content. which does not always fit.
i would like to truncate the text to a fixed width and append an ellipsis. the full text should be visible when hovering the text. this works fine, except that the now visible text covers text to its right. how can i prevent this?
this is what i've got so far.
.truncate {
max-width: 5em;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
}
.truncate:hover {
overflow: visible
}
jsFiddle
Here is how your approach could be improved so text will be readable when hovered.
Updated HTML:
<table>
<tr>
<td><span><a class="truncate">faksjfaklsjf asjf lajslfk jasklfj alkjsfkl jalskfjla</a></span>
</td>
<td>
<span>
<a class="truncate">
faskfjalskfj alkfj laksj flkajfl kajfl ajfkl ajsl
</a>
</span>
</td>
</tr>
</table>
See how <a> is now wrapped with <span>.
And here is updated CSS:
td {
width: 5em;
}
span {
height:1.2em;
position:relative;
display: inline-block;
}
.truncate {
max-width: 5em;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
}
.truncate:hover {
position:absolute;
max-width: none;
background:#fff;
z-index:100;
overflow:visible;
}
span is relatively positioned, so absolute item inside it will be shown in a new layer and will take virtually no space (will not shift other text when overflow:hidden removed).
a.truncate will now became absolutely positioned on hover and will loose max width restriction. background:#fff is required to
Demo
Add a title attribute to your tag and remove the hover CSS:
HTML
<table>
<tr>
<td>
<a class="truncate" title="faksjfaklsjf asjf lajslfk jasklfj alkjsfkl jalskfjla">
faksjfaklsjf asjf lajslfk jasklfj alkjsfkl jalskfjla
</a>
</td>
<td>
<a class="truncate" title="faskfjalskfj alkfj laksj flkajfl kajfl ajfkl ajsl">
faskfjalskfj alkfj laksj flkajfl kajfl ajfkl ajsl
</a>
</td>
</tr>
</table>
CSS
td {
width: 5em;
}
.truncate {
max-width: 5em;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
}
Fiddle here