I'm working on a react js project again after awhile. I need to show a table that won't exceed the viewport when the content has a very long string.
I tried the solution in this answer successfully on jsfiddle like in this code:
<div className="simple-table">
<Table striped bordered hover>
<thead>
<tr>
<th>Nama Barang</th>
<th>Jumlah</th>
<th>Harga</th>
<th>Subtotal</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lolipop Strawberry</td>
<td>20</td>
<td>Rp 5.000</td>
<td>Rp 100.000</td>
</tr>
</tbody>
</Table>
</div>
.simple-table {
width: 100%;
display: flex;
flex-direction: column;
}
.simple-table table {
width: 100%;
table-layout: fixed; /* add table layout fixed */
overflow: hidden; /* add overflow hidden */
border-collapse: collapse;
}
.simple-table > table td,
.simple-table > table th {
word-wrap: break-word !important;
}
the result on jsfiddle:
but when I try to apply the same code on my react js project, the result is like this:
what am I doing wrong? any help is appreciated.
On jsfiddle word-wrap: break-word is applied, in your project - for some reason - not. You have to check why. Try to debug the application and look if the css rule is applied or not.
it turns out I just needed to add a white-space:normal rule
.simple-table > Table th,
.simple-table > Table td {
white-space:normal !important; /* added this */
word-wrap: break-word !important;
}
Related
I want an ellipsis to appear whenever the text gets cut off when the width of the table cell is too narrow to display it. According to CSS Tricks, it's supposed to look as below (nothing surprising there).
td {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
However, I can't make it work. First I thought it was because I'm applying Bootstrap and there might be some styling poofing my approach but then I tried to reproduce the error in an isolated fiddle and - tada! - I got it working. (I.e. I got it to fail ellipting, hence got the reproducible error to succeed occurring.)
The fiddle is here. What am I missing?!
Solution 1
Table cells don't handle overflow well. You will need to set the max-width CSS property on each td for the overflow to work. Try to make use of max-width instead of width
The max-width CSS property sets the maximum width of an element.
It prevents the used value of the width property from becoming larger
than the value specified by max-width.
body {
font: 13px Verdana;
}
td {
background-color: pink;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 50px;
}
<table class="table">
<thead>
<th>Name</th>
<th>Alias</th>
<th>Location</th>
<th>Updated</th>
<th>Actions</th>
</thead>
<tbody>
<tr>
<td>Ali Baba & Co.</td>
<td>Boys 'n da hood</td>
<td>Somewhere over the rainbow</td>
<td>February 30th</td>
<td>Do stuff!</td>
</tr>
</tbody>
</table>
Solution 2
Or Just place the td content inside <span> and then apply the css
body {
font: 13px Verdana;
}
span {
background-color: pink;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
display: block;
}
.table {
width: 100%;
table-layout:fixed;
}
<table class="table">
<thead>
<th>Name</th>
<th>Alias</th>
<th>Location</th>
<th>Updated</th>
<th>Actions</th>
</thead>
<tbody>
<tr>
<td><span>Ali Baba & Co.</span></td>
<td><span>Boys 'n da hood</span></td>
<td><span>Somewhere over the rainbow</span></td>
<td><span>February 30th</span></td>
<td><span>Do stuff!</span></td>
</tr>
</tbody>
</table>
I upload data in table using ajax. so when I received response - data will be filled to table and it will be visible on the screen. when data contain some small text example it looks ok. but if I upload file with 40 records which contains full text then width of screen increases in few times, scroll-x is going visible but it looks like table and huge empty space on screen.
I've checked all text and data in table. everything is inside table. someone know what can be the reason of problem?
I can fix this if add property overflow-x: hidden; on my div that wrap table. but this solution really bad)
It works the same on Chrome and Mozila
<div id="trainData" style="display: none" class="my-table">
<table class="table table-striped" id="trainTable">
<thead class="thead-inverse-blue">
<th class="inputText" >Input</th>
<th data-field="comment" >Comment</th>
</thead>
</table>
</div>
.table{
margin-top: 10px;
table-layout: fixed;
width: 100%;
margin-bottom: 0 !important;
border-bottom: 1px solid #dddddd;
border-collapse: collapse !important;
border-radius: 1px;
}
.table > tbody > tr > td {
width: 1px;
white-space: pre-wrap;
word-wrap: break-word;
}
.fresh-table .table > tbody > tr > td >content{
text-overflow:ellipsis;
overflow:hidden;
}
The problem was in decision to add white-space: pre-wrap; property. It occur scrolling and huge width. Changed to white-space: pre-line; and problem missed :)
I tried to create a table in AngularJS with sticky header and footer. I've managed to do that; here's a Plunker demo and code:
<body ng-controller="MainCtrl as ctrl">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>
Column1
</th>
<th>
Column2
</th>
<th>
Column3
</th>
<th>
Column4
</th>
<th>
Column5
</th>
</tr>
</thead>
<tbody>
<tr class="info" ng-repeat="item in items">
<td>
{{item.name}}
</td>
<td>
{{item.type}}
</td>
<td>
{{item.value}}
</td>
<td>
{{item.code}}
</td>
<td>
{{item.id}}
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>
Column1
</th>
<th>
Column2
</th>
<th>
Column3
</th>
<th>
Column4
</th>
<th>
Column5
</th>
</tr>
</tfoot>
</table>
</body>
But the only problems are:
The column width isn't dynamic, as you can see, in the first row the data overflows into the 2nd column.
The columns are misaligned.
Any idea how to fix this?
The criteria for success of this question are:
Pure CSS.
Dynamically sized columns.
Sticky header and footer that size with the columns.
What you want is impossible.
The reason why the cells are almost right is because the table is semi-there, but there are actually multiple tables in the document. By overriding the <table> elements display type to flex, you've rendered the page in several different groups. The <thead> and <tfoot> are their own table, and their <tbody> is its own table. They do not size to one another, rather to other table cells in their own group.
Other CSS guides about this topic require a fixed width. http://joshondesign.com/2015/05/23/csstable
After playing around with it (specifically, trying to move the thead and tfoot to fixed positions), I've decided that any attempt to give specific rules to the header/footer breaks the table layout and will cause the sizing to work differently, which is why fixed width is required on the cells. Even in the examples, they are broken in this way, but the fixed width nullifies the problem.
Your absolute easiest fix is to fix the widths and give them overflow-x properties.
The alternative is to use JavaScript. With JS, all bets are off, and you can do anything you imagine. Specifically, you could use JS to autosize cells. I remember having success with a jQuery plugin that accomplished that.
https://www.datatables.net/
Otherwise, no. I cannot find any example online that does what you need it to do. Any attempts to get this specific layout working is a hack and you're better off making a no-JS version with overflow-x cells and fixed widths, and a JS-enabled version that autosizes cells.
As you already know from the other answers, you should remove white-space: nowrap;, but there's also something you can do about the scrollbar:
table thead, table tfoot {
width: calc(100% - 17px);
}
Updated Plunker
this looks perfect on my PC because the Windows scrollbars are 17px broad. If you want to be safe and check the scrollbar width, use this:
window.onload = function() {
var tr = document.getElementById("__tbody").children[0];
var scrWidth = window.innerWidth - tr.clientWidth - 3;
var width = "calc(100% - " + scrWidth + "px)";
document.getElementById("__thead").style.width = width;
document.getElementById("__tfoot").style.width = width;
}
This calculates how broad the scrollbars are and then adjusts thead and tfoot. Of course then you have to set the ids <thead id="__thead">, <tbody id="__tbody"> and <tfoot id="__tfoot">.
In order to return the table back to its normal, dynamically-resizing self, there are a few steps to follow. Each step mentioned will give freedom back to its respective table elements, making their lives much simpler.
First, remove all instances of flex. You want the table to act like a table, right? Next, let your thead, tr, and tfoot be themselves as well. Why make them display as a table? Lastly, your tbody is being set to display as a block. This, in a sense, segregates it from its other table friends, namely thead and tfoot. This creates a lonely situation for everyone involved.
Your final code will look like this:
table {
table-layout: auto;
max-height: 300px;
}
table thead, table tfoot,
table tbody tr {
table-layout: fixed;
}
tbody td,
thead th,
tfoot td{
border-right: 1px solid transparent;
vertical-align: middle;
white-space: nowrap;
}
table thead {
width: 100%;
}
table tfoot {
width: 100%;
}
table tbody {
overflow-y: auto;
}
table tbody tr {
width: 100%;
}
This will allow your table cells to be themselves--dynamically resizing as they see fit.
Remove
white-space: nowrap;
and add
word-wrap: break-word;
tfoot td{
border-right: 1px solid transparent;
vertical-align: middle;
word-wrap: break-word;
}
1st answer: add the below css to td element
td{
white-space: normal;
word-wrap: break-word;
}
2nd answer: you need to create seperate table for header and footer and assign 20 % width to each td and th. It should work.
Answer of first question:
td {
text-overflow: ellipsis !important;
overflow: hidden !important;
}
text-overflow: ellipsis is very useful because the user can copy the whole value.
Answer of second question:
Have a look at the answer of this question: Table scroll with HTML and CSS
It seems you need either javascript or inner table solution.
UPDATED for second answer:
Use following styles on your table and tbody (working on Chrome):
table {
overflow-y: visible !important;
}
tbody {
overflow-y: overlay !important;
}
Plunker Demo
Your misalignment is coming because of followings
overflowing text
width of scrollbar in tbody
solution:
give overflow-x:auto to 'td' and and some max-width/width
make your last th as much extra bigger then others as your scroll-bar width is.
for better look to scrollbars put custom css for scroll-bar
Add following css to your page and enjoy plunkerLink
th,td {
width: 20%!important;
overflow-x: auto;
padding: 10px;
}
th:last-of-type {
width: calc(20% + 6px)!important;
}
::-webkit-scrollbar {
width: 3px!important;
height: 6px!important;
}
::-webkit-scrollbar-button {
width: 0;
height: 0;
}
::-webkit-scrollbar-thumb {
border: 2px solid #ccc;
background: #ccc;
border-radius: 8px;
}
::-webkit-scrollbar-track-piece {
width: 3px!important;
border: 1px solid #fff;
}
Use bootstrap classes for the purpose of styling. Your custom styling(style.css) is creating the problem. Also, the <table> tag provides dynamic width of columns by default. An excerpt from How to create a dynamic width column in Twitter Bootstrap answer:
<table class="table">
<tr><th>Id</th> <th>Name</th> <th>Email address</th></tr>
<tr><td>100001</td> <td>Joe</td> <td>MamiePVillalobos#teleworm.us</td></tr>
<tr><td>100</td> <td>Christine</td> <td>ChristineJWilliams#dayrep.com</td></tr>
<tr><td>1001</td> <td>John</td> <td>JohnLMiley#dayrep.com</td></tr>
This will give you the desired output
Here is your answer:
https://plnkr.co/edit/cyN0qDuxIs8LjkxIhur5?p=preview
tbody td,
thead th,
tfoot td{
word-wrap:break-word;
table-layout:fixed;
white-space:normal;
}
https://plnkr.co/edit/3hYms9hRqzF2DV9yTBCG?p=preview
Added this in your css:
tr.info td {word-wrap: break-word; white-space: normal;}
I have simply altered your style.css in Plunker demo as follows
/* Put your css in here */
table {
table-layout: auto;
display: flex;
flex-flow: column;
max-height: 300px;
}
table thead, table tfoot,
table tbody tr {
display: table;
table-layout: fixed;
}
tbody td,
thead th,
tfoot td{
border-right: 1px solid transparent;
vertical-align: middle;
text-align: center;
white-space: normal;
word-wrap: break-word;
text-wrap: normal;
}
table thead {
/*flex: 0 0 auto;*/
width: 100%;
}
table tfoot {
/*flex: 0 0 auto;*/
width: 100%;
}
table tbody {
flex: 1 1 auto;
display: block;
overflow-y: auto;
}
table tbody tr {
width: 100%;
}
thead { display: table-header-group }
tfoot { display: table-row-group }
tr { page-break-inside: avoid }
this is working fine.. pls try
So I have this code here:
<table>
<tr>
<td width="200px" valign="top">
<div class="left_menu">
<div class="menu_item">
Home
</div>
</div>
</td>
<td width="1000px" valign="top">Content</td>
</tr>
</table>
with the CSS
.left_menu {
background: none repeat scroll 0 0 #333333;
border-radius: 5px 5px 5px 5px;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
}
.menu_item {
background: none repeat scroll 0 0 #CCCCCC;
border-bottom: 1px solid #999999;
border-radius: 5px 5px 5px 5px;
border-top: 1px solid #FFFFCC;
cursor: pointer;
padding: 5px;
}
It works fine on my browser and I have tested it in every browser both mac and PC, but someone is complaining that the td with the width of 200 keeps changing width. I have no idea what he is talking about. Does anyone know why he or she is seeing the width change on the td?
It should be:
<td width="200">
or
<td style="width: 200px">
Note that if your cell contains some content that doesn't fit into the 200px (like somelongwordwithoutanyspaces), the cell will stretch nevertheless, unless your CSS contains table-layout: fixed for the table.
EDIT
As kristina childs noted on her answer, you should avoid both the width attribute and using inline CSS (with the style attribute). It's a good practice to separate style and structure as much as possible.
<table style="table-layout:fixed;">
This will force the styled width <td>. If the text overfills it, it will overlap the other <td> text. So try using media queries.
Width and/or height in tables are not standard anymore; as Ianzz says, they are deprecated. Instead the best way to do this is to have a block element inside your table cell that will hold the cell open to your desired size:
<table>
<tr>
<td valign="top">
<div class="left_menu">
<div class="menu_item">
Home
</div>
</div>
</td>
<td valign="top" class="content">Content</td>
</tr>
</table>
CSS
.content {
width: 1000px;
}
.left_menu {
background: none repeat scroll 0 0 #333333;
border-radius: 5px 5px 5px 5px;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
width: 200px;
}
.menu_item {
background: none repeat scroll 0 0 #CCCCCC;
border-bottom: 1px solid #999999;
border-radius: 5px 5px 5px 5px;
border-top: 1px solid #FFFFCC;
cursor: pointer;
padding: 5px;
}
This problem is quite easily solved using min-width and max-width within a css rule.
HTML
<table>
<tr>
<td class="name">Peter</td>
<td class="hobby">Photography</td>
<td class="comment">A long comment about something...</td>
</td>
</table>
CSS
.name {
max-width: 80px;
min-width: 80px;
}
This will force the first column to be 80px wide. Usually I only use max-width without min-width to reign in text that is very occasionally too long from creating a table that has a super wide column that is mostly empty. The OP's question was about setting to a fixed width though, hence both rules together. On many browsers width:80px; in CSS is ignored for table columns. Setting the width within the HTML does work, but is not the way you should do things.
I would recommend using min and max width rules, and not set them the same but rather set a range. This way the table can do it's thing, but you can give it some hints on what to do with overly long content.
If I want to keep the text from wrapping and increasing the height of a row - but still make it possible for a user to see the full text, I use white-space: nowrap; on the main rule, then apply a hover rule that removes the width and nowrap rules so that the user can see the full content when they over their mouse over it.
Something like this:
CSS
.name {
max-width: 80px;
white-space: nowrap;
overflow: hidden;
}
.name:hover {
max-width: none;
white-space: normal;
overflow:auto;
}
It just depends on exactly what you are trying to achieve. I hope this helps someone.
PS As an aside, for iOS there is a fix for hover not working - see CSS Hover Not Working on iOS Safari and Chrome
You can't specify units in width/height attributes of a table; these are always in pixels, but you should not use them at all since they are deprecated.
You can try the "table-layout: fixed;" to your table
table-layout: fixed;
width: 150px;
150px or your desired width.
Reference:
https://css-tricks.com/fixing-tables-long-strings/
You can use within <td> tag css : display:inline-block
Like: <td style="display:inline-block">
try this:
word-break: break-all;
try to use
word-wrap: break-word;
hope this help
I use
<td nowrap="nowrap">
to prevent wrap
Reference: https://www.w3schools.com/tags/att_td_nowrap.asp
Note that adjusting the width of a column in the thead will affect the whole table
<table>
<thead>
<tr width="25">
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tr>
<td>Joe</td>
<td>joe#email.com</td>
</tr>
</table>
In my case, the width on the thead > tr was overriding the width on table > tr > td directly.
I tried with many solutions but it didn't work for me so I tried flex with the table and it worked fine for me with all table functionalities like border-collapse and so on only change is display property
This was my HTML requirement
<table>
<thead>
<tr>
<th>1</th>
<th colspan="3">2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td colspan="3">2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td colspan="2">3</td>
</tr>
</tbody>
</table>
My CSS
table{
display: flex;
flex-direction: column;
}
table tr{
display: flex;
width: 100%;
}
table > thead > tr > th:first-child{
width: 20%;
}
table > thead > tr > th:last-child{
width: 80%;
}
table > tbody tr > td:first-child{
width: 10%;
}
table > tbody tr > td{
width: 30%;
}
table > tbody tr > td[colspan="2"]{
width: 60%;
}
table > tbody tr > td[colspan="3"]{
width: 90%;
}
/*This is to remove border making 1px space on right*/
table > tbody tr > td:last-child{
border-right: 0;
}
If you don't set the table to have table-layout: fixed and a certain width, then the table cells will stretch beyond their own width if content is wider. That's what he/she was complaining about.
Use
<table style="table-layout:fixed;">
It will force table to set to 100% width.Then use this code
$('#dataTable').dataTable( {
bAutoWidth: false,
aoColumns : [
{ sWidth: '45%' },
{ sWidth: '45%' },
{ sWidth: '10%' },
]
});
(table id is dataTable and having 3 column)
to specify length to each cell
Consider the following example: (live demo here)
$(function() {
console.log("width = " + $("td").width());
});
td {
border: 1px solid black;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>Hello Stack Overflow</td>
</tr>
</tbody>
</table>
The output is: width = 139, and the ellipsis doesn't appear.
What am I missing here?
Apparently, adding:
td {
display: block; /* or inline-block */
}
solves the problem as well.
Another possible solution is to set table-layout: fixed; for the table, and also set it's width. For example: http://jsfiddle.net/fd3Zx/5/
It's also important to put
table-layout:fixed;
Onto the containing table, so it operates well in IE9 (if your utilize max-width) as well.
As said before, you can use td { display: block; } but this defeats the purpose of using a table.
You can use table { table-layout: fixed; } but maybe you want it to behave differently for some colums.
So the best way to achieve what you want would be to wrap your text in a <div> and apply your CSS to the <div> (not to the <td>) like this :
td {
border: 1px solid black;
}
td > div {
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Try using max-width instead of width, the table will still calculate the width automatically.
Works even in ie11 (with ie8 compatibility mode).
td.max-width-50 {
border: 1px solid black;
max-width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<table>
<tbody>
<tr>
<td class="max-width-50">Hello Stack Overflow</td>
</tr>
<tr>
<td>Hello Stack Overflow</td>
</tr>
<tr>
<td>Hello Stack Overflow</td>
</tr>
</tbody>
</table>
jsfiddle.
Demo page
For tables with dynamic width, I found the below way to produce satisfying results. Each <th> which is wished to have trimmed-text ability should have an inner wrapping element which wraps the contents of the <th> allow text-overflow to work.
The real trick is to set max-width (on the <th>) in vw units.
This will effectively cause the element's width to be "bound" to the viewport width (browser window) and will result in a responsive content clipping. Set the vw units to a satisfying value needed.
Minimal CSS:
th{ max-width:10vw; }
th > .wrap{
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
Demo (with editable texts):
document.designMode="on"
table {
font: 18px Arial;
width: 40%;
margin: 1em auto;
color: #333;
border: 1px solid rgba(153, 153, 153, 0.4);
}
table td, table th {
text-align: left;
padding: 1.2em 20px;
white-space: nowrap;
border-left: 1px solid rgba(153, 153, 153, 0.4);
}
table td:first-child, table th:first-child {
border-left: 0;
}
table th {
border-bottom: 1px solid rgba(153, 153, 153, 0.4);
font-weight: 400;
text-transform: uppercase;
max-width: 10vw;
}
table th > .wrap {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
<table>
<thead>
<tr>
<th>
<div class="wrap" title="Some long title">Some long title</div>
</th>
<th>
<div class="wrap">Short</div>
</th>
<th>
<div class="wrap">medium one</div>
</th>
<th>
<div class="wrap" title="endlessly super long title which no developer likes to see">endlessly super long title which no developer likes to see</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>very long text here</td>
</tr>
</tbody>
</table>
Just offering an alternative as I had this problem and none of the other answers here had the desired effect I wanted. So instead I used a list. Now semantically the information I was outputting could have been regarded as both tabular data but also listed data.
So in the end what I did was:
<ul>
<li class="group">
<span class="title">...</span>
<span class="description">...</span>
<span class="mp3-player">...</span>
<span class="download">...</span>
<span class="shortlist">...</span>
</li>
<!-- looped <li> -->
</ul>
So basically ul is table, li is tr, and span is td.
Then in CSS I set the span elements to be display:block; and float:left; (I prefer that combination to inline-block as it'll work in older versions of IE, to clear the float effect see: http://css-tricks.com/snippets/css/clear-fix/) and to also have the ellipses:
span {
display: block;
float: left;
width: 100%;
// truncate when long
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Then all you do is set the max-widths of your spans and that'll give the list an appearance of a table.
Instead of using ellipsis to solve the problem of overflowing text, I found that a disabled and styled input looked better and still allows the user to view and select the entire string if they need to.
<input disabled='disabled' style="border: 0; padding: 0; margin: 0" />
It looks like a text field but is highlight-able so more user friendly
Check box-sizing css property of your td elements. I had problem with css template which sets it to border-box value. You need set box-sizing: content-box.
I've tried many of the above solutions but none of them felt flexible or satisfying.
This little hack with max-width: 1px can be applied directly to the td element
.truncated-cell {
max-width: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Leave your tables as they are. Just wrap the content inside the TD's with a span that has the truncation CSS applied.
/* CSS */
.truncate {
width: 50px; /*your fixed width */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block; /* this fixes your issue */
}
<!-- HTML -->
<table>
<tbody>
<tr>
<td>
<span class="truncate">
Table data to be truncated if it's too long.
</span>
</td>
</tr>
</tbody>
</table>
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
The above setting worked for me, without changing table widths. I added a div inside and added the class ellipsis to it.
If you don't want to set max-width to td (like in this answer), you can set max-width to div:
function so_hack(){}
function so_hack(){} http://jsfiddle.net/fd3Zx/754/ function so_hack(){}
function so_hack(){}
Note: 100% doesn't work, but 99% does the trick in FF. Other modern browsers doesn't need silly div hacks.
td {
border: 1px solid black;
padding-left:5px;
padding-right:5px;
}
td>div{
max-width: 99%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}