How do I get the ellipsis in second line with pure CSS?
here is the CSS am using now
.desc p{
display: table-cell;
width:90%;
vertical-align: middle;
height:30px ;
overflow: hidden;
text-overflow: ellipsis;
}
CSS does not currently support multilines. You need to use JavaScript or jQuery. I recommend the dotdotdot jQuery plugin.
Related
I am using ngx-treeview component in my angular 6 project. My tree-view items are very lengthy. So, I'm trying to apply text-overflow:ellipsis in the ./treeview-container .row-item. snippet goes like this
:host /deep/ .treeview-container .row-item {
margin-bottom: .3rem;
flex-wrap: nowrap;
width:100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
width is set to 100px and my text is truncated but the ellipsis is not applied. Could you support me in applying custom css?
Also I need to display full text on hovering. Does ":hover" works on treeview-item?
PS: I tried the same for ./treeview-item also but didn't work.
Is it possible to get only the first part of an attribute using attr() in CSS? By this I mean, targeting the part of an attribute before a certain character (a space, mainly). For example, from the attribute hello="foo bar" I would like to extract either foo or bar, just by using CSS.
Sincerely, I'd expect the answer to be 'no', but I'm not really sure.
The generic answer is no but in some particular case we can find some tricks. Since you have a space as a delimiter we can rely on word-spacing and/or text-indent and some overflow in order to hide a part of the word then adjust the width.
Here is an example:
.first:before {
content: attr(data-hello);
word-spacing: 50px;
display: inline-block;
vertical-align: top;
max-width: 40px;
overflow: hidden;
white-space: nowrap;
}
.first:after {
content: attr(data-hello);
text-indent: -60px;
word-spacing:50px;
display: inline-block;
vertical-align: top;
max-width: 40px;
overflow: hidden;
white-space: nowrap;
}
<span class="first" data-hello="foo bar">
some text
</span>
I am currently trying to display the word from ADIDAS SUPERSTAR LIMITED EDITION* to **ADIDAS SUPERSTAR.....** by using CSS. When i tried to use break-word in css but does not work for it. How can i do that?
I think you want to use text-overflow:
.title {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
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..
Per the examples https://getbootstrap.com/docs/4.3/content/code/#code-blocks, bootstrap only supports vertically-scrollable and word-wrapped <pre> blocks out of the box. How do I make it so that I have horizontally-scrollable, unwrapped code blocks instead?
The trick is that bootstrap overrides both the white-space and the CSS3 word-wrap attributes for the <pre> element. To achieve horizontal scrolling, ensure there's this in your CSS:
pre {
overflow: auto;
word-wrap: normal;
white-space: pre;
}
This worked for me:
pre {
overflow-x: auto;
}
pre code {
overflow-wrap: normal;
white-space: pre;
}
I keep coming back to this answer when I start new projects and have to read through comments to remember, oh yea, don't override the bootstrap class and don't forget overflow-wrap, etc...
So you have the stock pre-scrollable, which is vertical only scrolling, you may also want:
Horizontal only scrolling
.pre-x-scrollable {
overflow: auto;
-ms-word-wrap: normal;
word-wrap: normal;
overflow-wrap: normal;
white-space: pre;
}
Vertical and Horizontal scrolling
.pre-xy-scrollable {
overflow: auto;
-ms-word-wrap: normal;
word-wrap: normal;
overflow-wrap: normal;
white-space: pre;
max-height: 340px;
}
Newer versions of Bootstrap apply styles to both pre and code that wrap words. Adding this to my stylesheet fixed the issue for me:
pre code {
white-space: pre;
word-wrap: normal;
}