How to limit a table cell to one line of text using CSS?
overflow will only work if it knows where to start considering it overflown. You need to set the width and height attribute of the <td>
TAKE 2
Try adding table-layout: fixed; width:500px;
to the table's style.
UPDATE 3
confirmed this worked: http://jsfiddle.net/e3Eqn/
Limit table cell to only one line of text? 'overflow' and 'white-space' not working
nowrap
works well in table cells, but you are using <br>
forcing line to break. Simply enter some long text with spaces and you will see that it works fine:
<td><p>3 4 5 5 5 5 5 5 5 5 5 5 5</p></td>
http://jsfiddle.net/UNk64/
If you will put text-overflow:ellipsis;
and strip <p>
tags, you can make it end with ...
:
http://jsfiddle.net/UNk64/2/
If You really wish to ignore <br>
in td, you could use this css walkaround:
td br{
line-height: 0px;
display:none;
}
http://jsfiddle.net/UNk64/5/
Displaying one line of text only in a table cell
You can do this with using a combo of max-width:
and white-space: nowrap;
: JS Fidle
HTML
<table>
<tr>
<td>content content and a bunch of other stuff.</td>
</tr>
</table>
CSS
td {
max-width: 120px;
white-space: nowrap;
background: #000;
color: white;
}
Limiting number of text lines in a table cell
try this :
div
{
border: 1px solid #EECCDD;
width: 100px;
height: auto;
max-height: 40px;
overflow: hidden;
}
instead of this :
div
{
border: 1px solid #EECCDD;
width: 100px;
height: 40px;
overflow: hidden;
}
CSS text-overflow in a table cell?
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. No extra layout div
elements are required:
td
{
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
For responsive layouts; use the max-width
CSS property to specify the effective minimum width of the column, or just use max-width: 0;
for unlimited flexibility. Also, the containing table will need a specific width, typically width: 100%;
, and the columns will typically have their width set as percentage of the total width
table {width: 100%;}
td
{
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
td.column_a {width: 30%;}
td.column_b {width: 70%;}
Historical: For IE 9 (or less) you need to have this in your HTML, to fix an IE-specific rendering issue
<!--[if IE]>
<style>
table {table-layout: fixed; width: 100px;}
</style>
<![endif]-->
How to have line-breaks in a table cell only after a maximum width in CSS
Short Answer
What you want is not possible. You cannot keep the current HTML, add a max width to a table cell, keep table cells at their minimum widths and have words break without using JavaScript.
There are however some good alternatives that apply to most of your requirements.
Option 1 - overflow within a cell.
By applying white-space: nowrap
and overflow-y
you can use max-width
. The down side is that you have to scroll in the cell.
td {
white-space:nowrap;
border: 1px solid black;
max-width: 350px;
overflow-y:hidden;
}
<table>
<tr>
<td>This is a long text</td>
<td>short</td>
<td>LongerWord</td>
<td>Normal</td>
<td>This is a long text</td>
<td>Sometimes very long text could appear that should break so the table does not get way too wide</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>Normal</td>
</tr>
<tr>
<td>short</td>
<td>short</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>This is a long text</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>Normal</td>
</tr>
</table>
CSS/Javascript to force html table row on a single line
Use the CSS property white-space: nowrap and overflow: hidden on your td.
Update
Just saw your comment, not sure what I was thinking, I've done this so many times I forgot how I do it. This is approach that works well in most browsers for me... rather than trying to constrain the td, I use a div inside the td that will handle the overflow instance. This has a nice side effect of being able to add your padding, margins, background colors, etc. to your div rather than trying to style the td.
<html>
<head>
<style>
.hideextra { white-space: nowrap; overflow: hidden; text-overflow:ellipsis; }
</style>
</head>
<body>
<table style="width: 300px">
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
<tr>
<td>
<div class="hideextra" style="width:200px">
this is the text in column one which wraps</div></td>
<td>
<div class="hideextra" style="width:100px">
this is the column two test</div></td>
</tr>
</table>
</body>
</html>
As a bonus, IE will place an ellipsis in the case of an overflow using the browser-specific text-overflow:ellipsis style. There is a way to do the same in FireFox automatically too, but I have not tested it myself.
Update 2
I started using this truncation code by Justin Maxwell for several months now which works properly in FireFox too.
HTML text display Limit for table column
/Write CSS Code as Below/
.appadd {
white-space: nowrap;
overflow: hidden;
width: 180px;
height: 30px;
text-overflow: ellipsis;
}
Live Demo - Goto this Link
Related Topics
How to Align Youtube Embedded Video in the Center in Bootstrap
What Is the Simplest Way to Implement Pure CSS Show/Hide
How to Select Empty Textareas with CSS
Is CSS-Sprite a Good Technique
CSS Selectors - Difference Between and When to Use ">", "+" or " "
Angular - Including CSS File in Index.Html
Understanding the Difference Between the Flex and Flex-Grow Properties
Text-Align: Justify and Images
Align Header Elements in Shiny Dashboard
How to Make Datalist Arrow to Be Always Visible
Firefox 3 Adds Spacing to Spans with Display:Inline-Block
How to Make Image Hover in CSS
Realtime CSS/Scss Edition with Meteor Avoiding Server Restart
CSS H1 - Only as Wide as the Text