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>
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 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;
}
Let's take the following fiddle : http://jsfiddle.net/wQP8p/
<div class="card">
<div class="preview"></div>
<div class="name">Super Long Title Because I Want To Do It So</div>
<div class="extra">OK</div>
</div>
And the CSS
.card {
display: flex;
flex-wrap: wrap;
width: 200px;
}
.preview {
width: 100%;
padding-top: 45%;
background: red;
}
.name {
flex: auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background: yellow;
}
.extra {
flex: none;
background: blue;
}
What can I do to keep the ellipsis, and put the blue element at the left of the yellow one ?
Unfortunately, Flexbox doesn't work that way. If you want the flex items to appear side by side, you have to give them an appropriate flex-basis value that will allow them to fit within the flex container when wrapping is enabled (flex-shrink doesn't do anything here either).
http://jsfiddle.net/wQP8p/2/
.name {
flex: 1 80%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background: yellow;
}
.extra {
flex: 1 20%;
background: blue;
}
If the content is dynamic (ie. you don't know the actual width to set), you'll have to add a wrapper around these elements.
You could put the .extra div within the .name div and apply display:inline-block; to the .extra class, as shown in this JSFiddle.
Edit: This may not be a best practice, but it seems to achieve what you are looking for aesthetically.