I do have a table where I want to show the complete cell-content on hover.
I got this working with css, but now I'm facing a bug with all browsers except Chrome.
HTML extract:
<table><tr>
<td class="hover-text" style="width: 99px">
<div style="width: 99px">A long text</div>
</td>
</tr></table>
CSS extract:
.hover-text div{
text-overflow: ellipsis;
}
.hover-text:hover div{
overflow: visible;
z-index: 1;
width: auto !important;
position: absolute;
}
This works all fine, except if I use any browser but Chrome, there is just one row and there is a horizontal scroll-bar. Then the cells are strangely resized. Without one of this conditions, I got no problems. Unfortunately the HTML is given from the framework I use.
I tried all sort of things, but at this point I'm at a loss..
You can see this issue here if you resize the table so that there is no horizontal scroll-bar, everything works as expected.
Your td element has a class of "hover-text" whereas your CSS uses the selector .text-hover. This means that the CSS you've provided has no affect on the HTML you've provided.
To fix this, either change your td element's class to "text-hover" or change your CSS selectors to .hover-text.
I have adjusted your CSS, Now its working fine for me.
Working Demo
CSS
.hover-text div{
text-overflow: ellipsis;
overflow:hidden;
white-space:nowrap;
width:100%;
}
.hover-text:hover div{
overflow: visible;
z-index: 1;
width: auto !important;
position: absolute;
}
Please mind the names you keep in html markup and you use in css. Even a professional may confuse this way.
.hover-text div{
text-overflow: ellipsis;
}
.hover-text:hover div{
overflow: visible;
z-index: 1;
width: auto !important;
position: absolute;
}
Found a solution: http://jsfiddle.net/FmY5R/10/
td{
display: inline-block
}
But I'm still not sure what caused the bug..
Related
I'm outputting a list of file names with total views (tally) beside them.
I'm trying to get the tally to overflow the file name.
..So with a file / tally list like:
ejs-2015-participants-list 125,000
koh-hammertown-pics 20
slaughterhouse-co-summer-run 100
..I'm trying to get the result of:
ejs-2015-participan...125,000
koh-hammertown-pics 20
slaughterhouse-co-summe...100
The HTML / CSS (html5 / css3) has a structure like:
<style>
.box {width:200px;}
.box span {float:left;}
.box div {float:right;}
</style>
<div class="box">
<span>ejs-2015-participants-list</span><div>125,000</div>
<span>koh-hammertown-pics</span><div>20</div>
<span>slaughterhouse-co-summer-run</span><div>100</div>
</div>
I'm not particular about the elements used other than 'box' is repeated so it needs to be a class. If the structure won't work or you'd rather use another selector in your example, feel free. The solution does need to validate and work in consortium compliant browsers (not worried about IE).
I've tried various inline and block level elements with various style including:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Nothings working though - any ideas?
Tables would make the left side the same length for all rows.
You can totally get the effect you're looking for using flexbox (and for broader browser support fall back to a table solution). The idea here is that the price is the full width of its text, say "$500", and the rest of the space is filled by the item name, which has the three rules text-oveflow, overflow, and white-space that you mentioned.
Codepen:
http://codepen.io/tholex/pen/wKQPEV
HTML:
<div class="item">
<div class="name">Delicious Bagels</div>
<div class="price">$500</div>
</div>
CSS:
.row {
display: flex;
}
.name {
flex-grow: 1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.price {}
So I used a table for this, since it helps with alignment of the data and is semantically correct. No need to mess with floats.
The trick is really in the CSS. Set a max width, text-overflow of ellipsis, and don't allow word break. The actual ellipsis trick doesn't need to be in a table - any block level element can handle it.
Here's the codepen: http://codepen.io/anon/pen/bVQYWJ
CSS
.table td {
text-align: right;
}
.table th {
text-align: left;
}
.table th {
display: inline-block;
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
HTML
<table class="table">
<tr>
<th>ejs-2015-participants-list</th>
<td>125,000</td>
</tr>
<tr>
<th>koh-hammertown-pics</th>
<td>20</td>
</tr>
<tr>
<th>slaughterhouse-co-summer-run</th>
<td>100</td>
</tr>
</table>
The simple answer is your .box is too small to contain the div so it drops down. One solution is to make it wider but you have other problems.
Your span is an inline element while the div is block level. I don't know why you do it that way but you should probably contain those two inside their own div so one doesn't overflow into the other.
<div class="box">
<div>
<span> stuff </span><div>125,000</div>
</div>
...
Though it seems to me you should turn the div with the number into a span also. Then everything is inline.
I have an issue with my CSS solution that I had came up with. I have a list with 3000 rows or so and they each have the following css applied to each row:
.row .title,
.row .description {
position: relative;
overflow:hidden;
white-space: nowrap;
background-color: inherit;
}
.row .title:after,
.row .description:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 10%;
height: 100%;
background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,1));
}
Here is a sample row:
<tr class="row"><td class="title">really long test data string</td><td class="description">Test description</td></tr>
Basically what I am trying to do is fade out the text when the window is smaller than the table width. The problem is that I am always having high CPU usage when scrolling through the table, so it's non-responsive almost all the time. I realized it was this snippet of CSS that was causing this, but does anyone know of a way to make this work without causing high CPU usage. Maybe I am approaching this situation wrong? Anyone have any thoughts?
thanks!
Try using .row>.title and .row>.description - the > combinator is more efficient than the [space] combinator, because it only has to travel one level of the hierarchy instead of all of them.
Normally this won't make much difference, but with 3,000 rows it could.
Also, consider adding table-layout: fixed to your table. You may need to add some HTML:
<table style="table-layout:fixed">
<colgroup>
<col style="width: 50px" />
<col style="width: 250px" />
</colgroup>
<tbody>
<tr>...</tr>
...
</tbody>
</table>
This will allow the browser rendering engine to fix the table layout rather than making it dynamic based on the content - this will add up to a massive improvement for your huge table.
change your selectors to something more specific, e.g.:
.rowtitle,
.rowdescription {
position: relative;
overflow:hidden;
white-space: nowrap;
background-color: inherit;
}
or direct descendant if it suits your markup:
.row > .title,
.row > .description {
position: relative;
overflow:hidden;
white-space: nowrap;
background-color: inherit;
}
cascading selectors are more expensive because the browser traverses the DOM right to left when interpreting a css selector.
you can measure your css selectors performance with Chrome dev tools, "Profiles" and use the "Collect CSS Selector Profile".
I'm using php to echo words from data, now the data might have long words length, about 50 words without using <br />.
Since the outpost doesn't have <br /> tag he got scrolling right (x) option (I know I can use overflow-x: hidden; but thats not it).
CSS
.main-text{
padding-left: 250px;
margin: -160px 0 0;
padding-bottom: 70px;
}
.autobody{
width: 101.4%;
height: auto;
margin: -15px -10px;
background: #fff;
max-width: 101.4%;
}
My question is how can I block words from getting out the page without hidden the content? (the content from php data)
Example Image With Overflow-x: hidden;
http://img13.imageshack.us/img13/1291/m8w.png
Example Image Without Overflow-x: hidden;
http://img22.imageshack.us/img22/9567/fqn.png
Try this CSS:
word-wrap:break-word;
jsFiddle
try
word-wrap: break-word;
in the css
or if you want to use PHP to add the
wordwrap($text, 20, "<br />\n", true);
see the wordwrap function for more info
There's a great CSS property for that: http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap
Try word-wrap: break-word;
I want to have all text be ending with '...' but it only works for the inner div:
div {
border: solid 2px blue;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 40px;
}
<div>Test test test test test test
<div>asdasdasdasdasd</div>
</div>
http://jsfiddle.net/JU8Up/
is there any Solution so that also the text contained in the outer div gets the '...' ?
edit: seems like its a chrome problem, but still the fix in the answer below works
It works by adding float: left; to the div CSS, but without any further context I can't comment on what side-effects that may have in your implementation.
Example here.
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
I have a line of code ( which is to long to be displayed in one line ) to be displayed on a web page in one line, just like above.
I don't it to be wrapped into two lines.
Can I accomplish this only using css?
To actually make this happen when you use words with spaces in between them overflow:auto is not enough, you'll also need text-overflow: nowrap.
http://jsfiddle.net/kZV3j/
Here's how SO's code block looks:
<pre>
<code>
<span>...</span>
</code>
</pre>
And the CSS:
pre {
overflow: auto;
}
Demo: http://jsfiddle.net/TfeLm/
I think you're looking for overflow:auto:
<div style="overflow:auto; width:200px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
Create a containing element (e.g. a div), then set some basic CSS properties on it that define a width, and handle the overflow. Like this:
HTML
<div class="short">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
CSS:
.short {
width:400px;
padding: 10px;
overflow-x:scroll;
}
jsFiddle example. Works in all modern browsers and IE8.
I think you are looking for the overflow property with a auto value:
<style>pre { width: 200px; overflow: auto; }</style>
<pre><code><p>Some tooooo long text on one line</></code></pre>
Live example: http://jsbin.com/uhuveg/
I believe that you should use the following CSS
#id {
width: 400px;
padding: 5px;
background: #C3C3C3;
overflow-x: scroll
}
See this live example