I'd like to apply text-overflow: ellipsis; to the mat-panel-description of a mat-expansion-panel:
.mat-expansion-panel-header-description {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
}
While the overflow is hidden, there are no ellipsis. See the following screenshot of this stackblitz:
Wrapping is intentionally prevented since I don't want the description to wrap onto a second line. The long URL is also intentional:
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Panel Title
</mat-panel-title>
<mat-panel-description>
https://stackblitz.com/edit/angular-gsxyhn?file=app%2Fexpans ion-overview-example.html
</mat-panel-description>
</mat-expansion-panel-header>
</mat-expansion-panel>
</mat-accordion>
I think you will come to find out that if you just put text in flex containers you can run into problems. I think it is best if you have a container element to hold your text and will help you in this case.
Once the content is placed in some container, there is one thing that needs to be done to get the ellipsis to show up... add min-width: 0; to the mat-expansion-panel-header-description class.
<span class="mat-content">
<mat-panel-title class="mat-expansion-panel-header-title">
<div>Panel Title</div>
</mat-panel-title>
<mat-panel-description class="mat-expansion-panel-header-description">
<div>https://stackblitz.com/edit/angular-gsxyhn?file=app%2Fexpans ion-overview-example.html</div>
</mat-panel-description>
</span>
.mat-expansion-panel-header-title {
flex: 0 0 auto; /* make this not grow or shrink */
margin-right: 16px;
}
.mat-expansion-panel-header-description {
flex: 1 1 auto; /* make this grow and shrink */
min-width: 0; /* see link to see why this is needed */
margin-right: 16px;
}
.mat-expansion-panel-header-description > div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
I solved it changing the child's visibility property.
Take a look here.
Ellipsis won't work on a visibility: hidden element, or any of its children inheriting this property.
Related
Wish to display <p> text in 3 line with left align and rest of the text as ellipsis ( Please refer desired output image).
But currently the below css display in single line with ellipsis as below.
Could someone please advise how to make the text display in 3 line and rest in ellipsis ?
Actual Ouput:
.textElipsis {
width: 250px;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis !important;
}
<p class='textElipsis'>
Best heading added here. The most relevant data added here. Greatest of all time. Print the whole text here. Ideas are always usefull...
<div>
<code>{textCode}</code>
</div>
</p>
Desired output:
You can use the -webkit-line-clamp for this.
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
For browser support see:
https://caniuse.com/?search=line-clamp
Please also note, that you cannot put a div inside a p tag. It is not valid html.
List of HTML5 elements that can be nested inside P element?
.textElipsis {
width: 250px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
border: 1px dashed tomato;
}
.code {
display: block;
}
<p class='textElipsis'>
Best heading added here. The most relevant data added here. Greatest of all time. Print the whole text here. Ideas are always usefull...
<code class="code">{textCode}</code>
</p>
You can use line-clamp for this.
.textElipsis {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
But it is not supported by all the browser, you can try it or you can use Clamp.js for the same.
I have a div with different number of span inside depending on my code, my problem is, sometimes the last span does not fit the space and everything lost the align, what I want to do is applied my "truncate" class to the last element if needed, there is an example:
<div class="truncate">
<span> ONE </span>
<span> TWO </span>
<span> THREE </span>
<span> FOUR </span>
</div>
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
with this configuration, and also aplying "truncate" everything moved to left, and I stop watching "one" instead "four" as I want, either the "..." are not shown.
I also tried aplied truncate to the last child with same result:
.truncate:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Where is my mistake?
Check out the :last-child pseudo-class.
Might not be relevant to you now, but I had this problem, and I solved it with flex-shrink: 0 which tells certain elements never to shrink, which means that last element shrinks.
See example: https://jsfiddle.net/68usz20p/2/
div {
display: flex;
overflow: hidden;
width: 175px;
border: 1px solid red;
}
div span:not(:last-child) {
margin-right: 1ch;
flex-shrink: 0;
}
div span:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
You can using css :last-child Selector
.truncate span:last-child {
display:none; visibility:hidden;
}
<div class="truncate">
<span> ONE </span>
<span> TWO </span>
<span> THREE </span>
<span> FOUR </span>
</div>
Preview at https://jsfiddle.net/itsselvam/yt9srxLo/
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
CSS ellipsis inside flex item
(1 answer)
Closed 4 years ago.
I am trying to hide overflow in a label that is the child of a deeply nested flex-container. Below are two simple snippets to illustrate the problem:
Single container (works):
#parent-flexbox {
display: flex;
width: 200px;
}
label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div id="parent-flexbox">
<label>long text that should be hidden because it is wider than the parent container</label>
</div>
Nested container (doesn't work):
#parent-flexbox {
width: 200px;
}
#parent-flexbox, #child-flexbox {
display: flex;
}
label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div id="parent-flexbox">
<div id="child-flexbox">
<label>long text that should be hidden because it is wider than the parent container</label>
</div>
</div>
To solve this I could add an explicit width like max-width: 100% to every container in the hierarchy. This is a terrible solution that I'm hoping is unnecessary! My current best fitting solution, but not much better, is these two rules for the immediate parent of the label: {position: absolute; max-width: 100%}. I want to avoid using absolute position because this comes with problems of its own. This JSFiddle shows the absolute position solution (lines outcommented default).
How can I achieve the same as this JSFiddle without A) using position: absolute and B) targetting all containers in the hierachy to give them max-width: 100% or min-width: 0?
The issue here is that the nested container is overflowing the first container and that's why overflow hidden is not working as you expect since there is no overflow with label.
I added border so you can better see:
#parent-flexbox {
width: 200px;
}
#parent-flexbox, #child-flexbox {
display: flex;
border:1px solid green;
}
label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div id="parent-flexbox">
<div id="child-flexbox">
<label>long text that should be hidden because it is wider than the parent container</label>
</div>
</div>
To avoid this you may apply overflow:hidden to the containers:
#parent-flexbox {
width: 200px;
}
#parent-flexbox, #child-flexbox {
display: flex;
overflow: hidden;
}
label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div id="parent-flexbox">
<div id="child-flexbox">
<label>long text that should be hidden because it is wider than the parent container</label>
</div>
</div>
I don't think you can fix this without targeting the containers. And since your are applying display:flex to all of them, you can add another property with it.
In Chrome and Firefox both lines show an ellipsis at the end. However in IE11/Edge only the first line has an ellipsis and the second line is simply cutoff. Is there anyway to get IE11/Edge to work similar to Chrome/Firefox?
body {
font-family: 'Arial';
}
div.wrapped-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100px;
}
<div class="wrapped-text">
This is a test of wrapped<br>
text that should overflow
</div>
For anyone in the same situation I've found the only way to get this to work is to change the HTML a little so that each line in the div is wrapped in its own div - and those child divs get the css to add the ellipsis.
body {
font-family: 'Arial';
}
div.wrapped-text {
width: 100px;
}
div.wrapped-text > div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="wrapped-text">
<div>This is a test of wrapped</div>
<div>text that should overflow</div>
</div>
A representative code sample:
<div style="width:300px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<ul>
<li>Long name: <span>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</span></li>
</ul>
</div>
http://jsfiddle.net/G57LE/
It seems only the overflow property will do anything here.
How do I get the text to do an ellipsis on overflow for this div (where the ellipsis happens just before the end of the div)? Thanks!
Because the text isn't in the div itself. You would have to apply the width and overflow attributes to the span itself.
Possible solution for you: CSS text ellipsis when using variable width divs
add this
display: inline-block; overflow: hidden; text-overflow: ellipsis; width:300px;
to span's class .value
here is http://jsfiddle.net/G57LE/5/