I have a table where th <td> are styled as follows.
table.tvTable td{
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap; // with this line i get one erally wide row
padding: 3px;
}
Individually, they are styles with width (both in px, % and *). I also tried to set the width of the whole table too (which don't want to do beccause i want one of the columns to utilize maximum width available on the screen).
However, no clipping occures, let alone ellipsisation. I'm on Ch and FF.
Here's a demo of how I got it working. You indeed have to use table-layout: fixed as was mentioned. Setting the width of the td via CSS seems to work, as well, without having to specify it in the HTML.
Please let me know if you have any questions!
Unfortunately you have to use table-layout: fixed; AND set your table a width.
Related
I want to be able to add three dots and maintain a text in a single line in a responsive design.
So for example:
I have a link with a link inside a container element (e.g. <span>). If the text is long, it will shown in two lines one a small screen:
This is a very long text
and it wraps because it's very long
I want that text to be shown like this:
This is a very long text...
text-overflow: ellipsis; works if you have set a width to the container, but in responsive design and on my web app it's not specified obviously.
Here's the HTML:
<div class="itm-title">
This is a very long sentence and I don't want it to wrap, I want three dots
</div>
Is there a solution in CSS or jQuery that can solve this? thanks.
You actually don't need width to be "set" here. All the elements in the responsive design have their width. You can just do it around with the following rules:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Comment: This doesn't work with anchor:
a {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept. Learn more about incognito browsing.
It works! :)
No width set.
Using <a> tag.
Updated with OP's Code
.itm-title {
width: 150px;
}
a {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="itm-title">
This is a very long sentence and I don't want it to wrap, I want three dots
</div>
Result: Works!
There's a billion of tutorials, but none have worked for me unfortunately.
I need some artistnames to be in the header, centered, but with a css ellipsis, so very long names gets the "..." and will be truncated.
You can see the design here: http://www.cphrecmedia.dk/musikdk/mobile/artistchannel.php
Remember to resize your browser window.
Its meant for mobiles, so I cannot have any fixed withs and it should work with all kinds of mobile screensizes. I can make the ellipsis work, but then the text is no longer centered.
Any clue on how to do this best? I would really like to avoid any javascript as performance is highly important.
You need to update the rules for h1 with overflow & text-overflow.
.header h1, .headerwhite h1 {
font-size: 15px;
line-height: 49px;
text-overflow: ellipsis;/* generates dots if text on one single line and truncated */
overflow: hidden;/* triggers text-oveflow and mids floatting elements */
white-space: nowrap;/* keep text on a single line to trigger text-overflow; */
display: block;/* reset to basic behavior of h1 , else inline-block drops down if not enough room */
}
basicly same answer as dartanian300 :)
You may control the max-width of h1 too and add a margin:auto; : demo
UPDATE
Using display: inline-block simply removes the h1 altogether on smaller screens. You should avoid this.
Also, technically, the text is still centered. It takes into account the ellipsis when centering the text.
ORIGINAL ANSWER
In order for the ellipsis styling to work, you've got to set a few things on the element with the text:
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block ensures that the box you're trying to generate ellipsis on is shown as a block. If it's not, it won't know where the bounding box is.
text-overflow: ellipsis obviously should generate the ellipsis.
overflow: hidden for some reason, browsers won't generate the ellipsis unless you have this. I believe it has to do with the fact that the text will just flow outside the box with it.
white-space: nowrap this prevents your text from wrapping onto multiple lines. That way, you have one line with ellipsis at the end.
That work?
Please take look at this code:
td {
max-width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
http://jsfiddle.net/kd4zF/
I want "td" Description cell to display in 2 rows. Overflow should be hidden.
white-space: nowrap; display only one row, and without it all text is showing.
Any ideas?
add :before and :after to td refer this http://jsfiddle.net/microbians/csYjC/
Try
white-space:pre;
also press on enter where you need to break the text.
Check the following screenshot
text-overflow: ellipsis just works on single lines. That's why you have to use the white-space thing.
You have to make some JavaScript to achieve it. There's also a jQuery plugin: http://pvdspek.github.io/jquery.autoellipsis
There's also a little CSS trick that can fake it in multiple lines: http://www.mobify.com/blog/multiline-ellipsis-in-pure-css
I'm using Bootstrap and I have a table with a few columns, the last of which sometimes has a long piece of text without spaces. I noticed that under certain screen sizes, the table would overflow its parent div and create ugly overlapping with its sibling table.
I played around with it and I think the problem has to do with the text being unspaced. I created a jsfiddle that demonstrates what I mean.
As you can see, the top leftmost table is well behaved and simply grows vertically to accommodate more text. However, the bottom left table leads to an overflow on the right due to the long unspaced text and the right column of the bottom left table winds up "under" its sibling.
Does anyone have any tips on how I can fix this so that the very long text gets clipped or partially split onto a new line?
.the-table {
table-layout: fixed;
word-wrap: break-word;
}
Deprecated (i.e. word-wrap)
Add the following styles to your <table>
.the-table {
table-layout: fixed;
over-flow: break-word;
}
Then you can adjust your layout via-CSS as you wish.
This works without forcing table layout to be fixed
Just add it to td or any
.is-breakable {
word-break: break-word;
}
I was having trouble with these solutions working in Internet Explorer.
I used the following style to get it to finally work.
<td style="word-break: break-all">
You can use below css. This will wrap the text and apply ... in the end of the text.
e.g. This_is_a_large_text will be changed to This_is_a_lar...
td {
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
You can also add tool tip to show the complete text value.
<td data-toggle="tooltip" title="${text}">${text}</td>
Albers answer did the trick for me
.the-table {
table-layout: fixed;
word-wrap: break-word;
}
In the JS to load it dynamically add
$("#" + tableName ).addClass('the-table');
Hope it helps!!
I've got a <table> that contains a few columns whose textual value can be too long, therefore I wan't to "trim" them using "text-overflow: ellipsis" and "overflow: hidden" on the <td>'s in CSS. I noticed that in order for me to do that I have to set "table-layout: fixed" on the <table> which then forces me to specifically set every single column's width.
I didn't want to apply a bunch of class names or IDs to the columns, so I used the following CSS solution:
#error-list th:nth-child(1),
#error-list th:nth-child(6) {
width: 53px;
}
#error-list th:nth-child(2) {
width: 131px;
}
#error-list th:nth-child(3) {
width: 226px;
}
#error-list td:nth-child(3),
#error-list td:nth-child(4) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
The column list is fixed, so it isn't a big deal that I'm using the column's ordinal to style it, and I'm happy that the markup is leaner. This solution works great, but I wanted to ask whether there is a better solution.
In order for the above to work, I had to set the column width's such that it took account for padding and border as well. That way it would work in IE, Chrome and FF. It feels pretty nasty doing it this way, but when I tried using "-webkit-box-sizing: content-box" (so I could set the column widths without having to also worry about padding/border), Chrome didn't respect it.
Am I doing something wrong? Is there a better way? I don't mind having to hard-code every column width, but I hate having to use the border-box box-sizing.
I'm not sure if this is what you're looking for, but this is what I came up with:
http://jsfiddle.net/e7ZKq/1/
If you set a max-width to your td rule along with your other properties, the cells will fit to the content until you hit that max width and then it will cutoff the remainder with the ellipsis.