.flex-container {
display: flex;
text-overflow: ellipsis;
overflow: hidden;
text-align: left;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
ThisIsASampleText
</div>
Output: ThisIsASamp
Expected: ThisIsASam...
When i remove the flex property it is working fine.
I would like to know why the flex affect the ellipsis.
TIA
Your problem here is the lack of "flex-children". These would need to contain the styles to truncate an element, not the parent container.
Try moving the truncate properties to a separate .flex-child class like so:
.flex-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Source and detailed explanation: https://css-tricks.com/flexbox-truncated-text/
You can do something like this
.flex-container {
display: flex;
}
.flex-container p {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
<p>
ThisIsASampleText </p>
</div>
In your configuration you are having an anonymous block container flex item that contain your text (You may refer to the specificiation for this). The flex item will obey to the min-width constraint thus it will not shrink but will overflow and since it's an anonymous block you have no way to apply min-width to it.
In addition to this, the overflow properties need to be applied to the flex item and not the flex container since this one contain the text and the overflow property aren't inherited. In other words, when using flexbox, you will have two levels: the flex container and the flex items. You need to apply everything to the flex item.
Suppose we add a span around our text we will have this:
.flex-container {
display: flex;
text-overflow: ellipsis;
overflow: hidden;
text-align: left;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
<span>ThisIsASampleText</span>
</div>
Now we are able to target the flex item in order to add min-width:0 and the needed properties in order to have the expected output:
.flex-container {
display: flex;
text-align: left;
}
span {
min-width:0;
text-overflow: ellipsis;
overflow: hidden;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
<span>ThisIsASampleText</span>
</div>
Without the extra wrapper, we cannot target our flex item and applying the properties to the flex container will do nothing.
.flex-container {
display: flex;
text-align: left;
}
.text-container {
min-width: 0;
text-overflow: ellipsis;
overflow: hidden;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
<div class="text-container">ThisIsASampleText</div>
</div>
https://web.archive.org/web/20170801095151/https://brainlessdeveloper.com/2017/07/29/why-wont-my-text-overflow/
add below property in css class
white-space: nowrap;
word-break: break-word;
Related
I need to add text ellipsis in a h2 text inside flexbox.
I found a lot of great example out there, but none of them fit my case where there are intermediate divs in between:
<div class="parent-flex">
<div class="inner-div-1">
<div class="inner-div-2">
<h1>My long text is here</h1>
</div>
</div>
<div>... other column...</div>
</div>
and the css is:
.parent-flex {
display: flex;
}
h1 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Tried adding:
min-width: 0;
display: flex;
flex: auto; // tried also 0, 1, 0 1 and lot of other combinations
to every DIV in the chain but just can't make it work :(
Any help would be appreciated!
Can't make it to work.
Found the solution :)
no need to add any css to the inner divs
just:
.parent-flex {
flex: auto;
flex-direction: column;
padding: 0 20px;
min-width: 0px;
}
h1 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.flex-container {
display: flex;
text-overflow: ellipsis;
overflow: hidden;
text-align: left;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
ThisIsASampleText
</div>
Output: ThisIsASamp
Expected: ThisIsASam...
When i remove the flex property it is working fine.
I would like to know why the flex affect the ellipsis.
TIA
Your problem here is the lack of "flex-children". These would need to contain the styles to truncate an element, not the parent container.
Try moving the truncate properties to a separate .flex-child class like so:
.flex-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Source and detailed explanation: https://css-tricks.com/flexbox-truncated-text/
You can do something like this
.flex-container {
display: flex;
}
.flex-container p {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
<p>
ThisIsASampleText </p>
</div>
In your configuration you are having an anonymous block container flex item that contain your text (You may refer to the specificiation for this). The flex item will obey to the min-width constraint thus it will not shrink but will overflow and since it's an anonymous block you have no way to apply min-width to it.
In addition to this, the overflow properties need to be applied to the flex item and not the flex container since this one contain the text and the overflow property aren't inherited. In other words, when using flexbox, you will have two levels: the flex container and the flex items. You need to apply everything to the flex item.
Suppose we add a span around our text we will have this:
.flex-container {
display: flex;
text-overflow: ellipsis;
overflow: hidden;
text-align: left;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
<span>ThisIsASampleText</span>
</div>
Now we are able to target the flex item in order to add min-width:0 and the needed properties in order to have the expected output:
.flex-container {
display: flex;
text-align: left;
}
span {
min-width:0;
text-overflow: ellipsis;
overflow: hidden;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
<span>ThisIsASampleText</span>
</div>
Without the extra wrapper, we cannot target our flex item and applying the properties to the flex container will do nothing.
.flex-container {
display: flex;
text-align: left;
}
.text-container {
min-width: 0;
text-overflow: ellipsis;
overflow: hidden;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
<div class="text-container">ThisIsASampleText</div>
</div>
https://web.archive.org/web/20170801095151/https://brainlessdeveloper.com/2017/07/29/why-wont-my-text-overflow/
add below property in css class
white-space: nowrap;
word-break: break-word;
.flex-container {
display: flex;
text-overflow: ellipsis;
overflow: hidden;
text-align: left;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
ThisIsASampleText
</div>
Output: ThisIsASamp
Expected: ThisIsASam...
When i remove the flex property it is working fine.
I would like to know why the flex affect the ellipsis.
TIA
Your problem here is the lack of "flex-children". These would need to contain the styles to truncate an element, not the parent container.
Try moving the truncate properties to a separate .flex-child class like so:
.flex-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Source and detailed explanation: https://css-tricks.com/flexbox-truncated-text/
You can do something like this
.flex-container {
display: flex;
}
.flex-container p {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
<p>
ThisIsASampleText </p>
</div>
In your configuration you are having an anonymous block container flex item that contain your text (You may refer to the specificiation for this). The flex item will obey to the min-width constraint thus it will not shrink but will overflow and since it's an anonymous block you have no way to apply min-width to it.
In addition to this, the overflow properties need to be applied to the flex item and not the flex container since this one contain the text and the overflow property aren't inherited. In other words, when using flexbox, you will have two levels: the flex container and the flex items. You need to apply everything to the flex item.
Suppose we add a span around our text we will have this:
.flex-container {
display: flex;
text-overflow: ellipsis;
overflow: hidden;
text-align: left;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
<span>ThisIsASampleText</span>
</div>
Now we are able to target the flex item in order to add min-width:0 and the needed properties in order to have the expected output:
.flex-container {
display: flex;
text-align: left;
}
span {
min-width:0;
text-overflow: ellipsis;
overflow: hidden;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
<span>ThisIsASampleText</span>
</div>
Without the extra wrapper, we cannot target our flex item and applying the properties to the flex container will do nothing.
.flex-container {
display: flex;
text-align: left;
}
.text-container {
min-width: 0;
text-overflow: ellipsis;
overflow: hidden;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
<div class="text-container">ThisIsASampleText</div>
</div>
https://web.archive.org/web/20170801095151/https://brainlessdeveloper.com/2017/07/29/why-wont-my-text-overflow/
add below property in css class
white-space: nowrap;
word-break: break-word;
I'm trying to get an element with display: flex to work with text-overflow: ellipsis so overflown text is truncated with .... The width of the element is defined via its flex-basis from a parent flexbox, see here:
.parent {
display: flex;
min-width: 0;
}
.child {
display: flex;
background: yellow;
flex: 0 0 5em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<div class="parent">
<div class="child">
abcabcabcabcabcabcabc
</div>
</div>
I've search similar answers but none seem to cover this exact case. I do not want to introduce any additional elements and I want to keep the display: flex on the element because I need it for vertical centering.
As #misorude said, text-overflow applies to block container elements.
Try the following:
.parent {
display: flex;
min-width: 0;
}
.child {
display: block;
background: yellow;
flex: 0 0 5em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<div class="parent">
<div class="child">
abcabcabcabcabcabcabc
</div>
</div>
I have a nested flex container whose text I want to truncate when it isn't wide enough to show (https://codepen.io/BigMike/pen/mmMxQN).
What I want
(Large Screen)
(Small Screen with truncation)
I thought I could do it with
.truncated {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
but as I shrink the screen, the child reaches a point where it won't get any smaller.
Any suggestions?
Based on your comment, if you add this rule, it will all stay on one line
.regular {
flex-shrink: 0; /* won't allow element to become smaller than its content */
}
Updated codepen
.rows {
display: flex;
flex-wrap: wrap;
}
.child {
flex-basis: 50%;
background-color: red;
min-width: 0px;
}
.nested-row {
display: flex;
padding: 20px;
background-color: blue;
justify-content: space-between;
color: white;
}
.nested-child {
border: solid white 1px;
}
.truncated {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border: solid white 1px;
min-width: 0;
}
.regular {
flex-shrink: 0;
}
<div class="rows">
<div class="child">
<div class='nested-row'>
<div class="nested-child truncated">
I want this text to truncate but it breaks on a small screen
</div>
<div class='nested-child regular'>
Now this doesn't wrap
</div>
</div>
</div>
<div class="child">
Some other content
</div>
<div class="child">
Some other content
</div>
<div class="child">
Some other content
</div>
</div>
The problem is the white space property. You can just edit your style sheet like so.
.truncated {
overflow: hidden;
text-overflow: ellipsis;
white-space: wrap;
}