This question already has answers here:
text-overflow ellipsis on flex child not working [duplicate]
(4 answers)
Closed 5 years ago.
I'm trying to put ellipsis for text overflow:
parent:
.grid-row {
display: flex;
}
child:
.grid-cell {
display: flex;
flex-grow: 3;
flex-basis: 0;
align-items: center;
padding: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.grid-cell:first-child {
flex-grow: 1;
justify-content: center;
}
And, well the overflow is hidden, but without any ellipsis.
For text overflow to work you need a set width - set a width to your grid-row.
Also remove the display: flex from the grid-cell - see demo below:
.grid-row {
display: flex;
width: 250px;
}
.grid-cell {
/*display: flex;*/
flex-grow: 3;
flex-basis: 0;
/*align-items: center;*/
padding: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.grid-cell:first-child {
flex-grow: 1;
justify-content: center;
}
<div class="grid-row">
<div class="grid-cell">insert text here</div>
<div class="grid-cell">some text</div>
<div class="grid-cell">some more text here</div>
</div>
.grid-cell {
display: flex;
flex-grow: 3;
flex-basis: 0;
align-items: center;
padding: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-wrap:normal;
width: ###px;
}
You should set the width of .grid-cell
Add this to your .grid-cell:
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
Works like a charm.
Related
I have a span in a div like this:
As you can see, the text gets overflowed, but not with the three dots, as usual, when you use text-overflow: ellipsis.
This is my relevant html:
<div class="row main">
<span class="kurzbezeichnung">
<mat-icon svgIcon="file"></mat-icon>
Hello! This is a longer text to see if overflow ellipsis effect will get
applied!
</span>
//here is some more stuff of course, but this is the relevant code
</div>
This is the relevant CSS:
.row {
& span {
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
}
.kurzbezeichnung {
width: 150px;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
}
.row {
display: flex;
flex-direction: row;
gap: 18px;
width: 100%;
}
Why does it overflow without the three dots?
Change the span tag to div and add a 'white-space:nowrap' to the class
HTML
<div class="row main">
<div class="kurzbezeichnung">
<mat-icon svgIcon="file"></mat-icon>
Hello! This is a longer text to see if overflow ellipsis effect will get
applied!
</div>
//here is some more stuff of course, but this is the relevant code
</div>
CSS
.row {
& span {
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
}
.kurzbezeichnung {
width: 150px;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.row {
display: flex;
flex-direction: row;
gap: 18px;
width: 100%;
}
I have the following CSS, trying to make a responsive table-like design.
.table {
display: flex;
width: 100%;
flex-direction: column;
overflow-x: auto;
}
.table__row {
display: flex;
flex-flow: row nowrap;
}
.table__column {
flex-shrink: 0;
display: block;
align-items: center;
padding: .54rem 1.05rem;
width: 300px;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Here's a JSFiddle: https://jsfiddle.net/abuer473/
The problem is that when a user scrolls to the right, the background gets lost. How do I fix this?
I was able to fix the issue by adding background to the columns of every even numbered row:-
css:
.table__row:nth-child(2n) > .table__column {
background: #AAA;
}
or else you could write
css:
.table__row:nth-child(even) > .table__column {
background: #AAA;
}
DEMO
I have trouble getting text-overflow: ellipsis and overflow: hidden working the way I need it.
Basically, I need to get the left div with class item1 and text "Please truncate me" to shrink as the width of the container decreases so that both item1 and item2 are on the same row.
No matter what I try I end up with the row overflowing and it never shrinks.
Tried various solutions from here but didn't manage to get any working the way I need.
.mainwrapper {
display: flex;
justify-content: center;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.content {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
margin-bottom: 20px;
max-width: 800px;
width: 100%;
height: 400px;
background-color: red;
}
.top-container {
display: flex;
flex-wrap: wrap;
width: 80%;
height: 80%;
background-color: cyan;
}
.title {
background-color: white;
}
.table-container {
display: table;
}
.skills-container {
width: 100%;
display: block;
background-color: green;
}
.skill-row {
width: 100%;
display: flex;
justify-content: start;
background-color: blue;
}
.item1 {
display: flex;
flex-wrap: nowrap;
}
.item2 {
flex-shrink: 0;
display: flex;
flex-wrap: nowrap;
}
.item-content {
display: flex;
}
.item-details {
display: flex;
}
.text1 {
display: inline-block;
white-space: nowrap;
background-color: yellow;
}
.small-button {
display: flex;
height: 50px;
width: 50px;
background-color: green;
}
.overflow-toverflow {
overflow: hidden;
text-overflow: ellipsis;
}
.flex-w {
flex-wrap: wrap;
}
.flex-nw {
flex-wrap: nowrap;
}
.flex-min {
flex: 1 1 auto;
min-width: 0;
}
.flex-sh-0 {
flex-shrink: 0;
}
.min0 {
min-width: 0;
}
<div class="mainwrapper">
<div class="content flex-min">
<div class="top-container flex-min">
<div class="title">Your skills</div>
<div class="table-container">
<div class="skills-container">
<div class="skill-row flex-nw flex-min">
<div class="item1 flex-min">
<div class="item-content">
<div class="small-button"></div>
<div class="text1 overflow-toverflow">Please truncate me! Please truncate me!Please truncate me!Please truncate me!Please truncate me!Please truncate me</div>
</div>
</div>
<div class="item2 flex-sh-0">
<div class="small-button"></div>
<div class="text1">Relevance: None Whatsoever None</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
codepen:
https://codepen.io/Tiartyos/pen/Ljxyqr
An initial setting on flex items is min-width: auto. This means that, by default, an item cannot shrink below the size of its content. This prevents the ellipsis from rendering since the item simply expands to accommodate all content.
Most of your flex items have the necessary min-width: 0 override applied. But not all of them.
Also, flex and table properties don't play well together. Mixing them can break a flex layout, which appears to be happening in your case.
With the following adjustments, your layout seems to work.
.table-container {
/* display: table; */
min-width: 0; /* NEW */
}
.item-content {
display: flex;
min-width: 0; /* NEW */
}
revised codepen
More information:
Why doesn't flex item shrink past content size?
(This post would be a duplicate of this link, if it weren't for the display: table matter.)
I have nested flex elements with a text at the bottom. The top element has fixed width that is smaller than text:
.list-header {
display: flex;
width: 150px;
height: 80px;
background-color: #ececec;
}
.list-component {
display: flex;
flex: 1;
padding-left: 24px;
padding-right: 24px;
}
.header-container {
display: flex;
flex: 1;
}
.header-text {
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<div class="list-header">
<div class="list-component">
<div class="header-container">
<div class="header-text">
<span>long long long long long long text</span>
</div>
</div>
</div>
</div>
I can fix this by applying overflow: hidden; to all elements:
.list-header {
display: flex;
width: 150px;
height: 80px;
background-color: #ececec;
}
.list-component {
display: flex;
flex: 1;
padding-left: 24px;
padding-right: 24px;
overflow: hidden;
}
.header-container {
display: flex;
flex: 1;
overflow: hidden;
}
.header-text {
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<div class="list-header">
<div class="list-component">
<div class="header-container">
<div class="header-text">
<span>long long long long long long text</span>
</div>
</div>
</div>
</div>
But I don't really like this solution.
Is there are way to fix it using only flex properties?
An initial setting on flex items is min-width: auto. This means that flex items cannot be shorter than the width of their content.
You have white-space: nowrap on the text element. As a result, all flex item ancestors must expand (in a domino effect) to accommodate the length of the text.
The affected flex items are:
.list-component
.header-container
.header-text
Therefore, in order to prevent the text from overflowing the primary container, you need to override the min-width: auto default. The flexbox spec provides two methods for doing this:
Add min-width: 0 to flex items
Add overflow with any value other than visible to flex items. (This is why you were able to fix the problem by adding overflow: hidden. It's actually a clean and valid solution.)
This behavior is explained in more detail in this post:
Why doesn't flex item shrink past content size?
.list-header {
display: flex;
width: 150px;
height: 80px;
background-color: #ececec;
}
.list-component {
display: flex;
flex: 1;
padding-left: 24px;
padding-right: 24px;
min-width: 0; /* NEW */
}
.header-container {
display: flex;
flex: 1;
min-width: 0; /* NEW */
}
.header-text {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0; /* NEW */
}
span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<div class="list-header">
<div class="list-component">
<div class="header-container">
<div class="header-text">
<span>long long long long long long text</span>
</div>
</div>
</div>
</div>
I would like to have a one-line "row" that contains 2 "columns". The first "column" should be fluid and cut off overflowing text.
The example below is perfectly working in webkit browsers (Chromium, Safari), but not in Firefox or Opera.
Does anyone know a solution that works in all browsers?
http://jsfiddle.net/fluidblue/YV3s9/
HTML:
<div class="header">
<div class="clickable">
<div class="description">
Some very very very very very very very very very very long description
</div>
</div>
<div class="buttons">
Link1
Link2
</div>
</div>
<div class="content">
Text below
</div>
CSS:
*
{
margin:0;
padding:0;
}
.header
{
background-color: gray;
display: table;
width: 100%;
}
.clickable
{
background-color: green;
display: table-cell;
width: 100%;
position: relative;
cursor: pointer;
}
.description
{
width: 100%;
position: absolute;
top:0;
left:0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.buttons
{
background-color: red;
display: table-cell;
white-space: nowrap;
}
Edit: Added top, left as suggested by web2008
Try removing position: absolute given for description or else if you wnat it then set the left and top values.
Tried another approach: flex-box. This is working in Firefox, Chromium, Safari, but not in Opera (overflow: hidden is ignored..)
http://jsfiddle.net/JH5fQ/
HTML:
<div class="flex-container flex-container-style">
<div class="flex-item">
Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>
<div class="flex-item">
Button Button
</div>
</div>
CSS:
.flex-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: start;
-moz-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.flex-item
{
white-space: nowrap;
}
.flex-item:nth-child(1)
{
overflow: hidden;
text-overflow: ellipsis;
background-color: red;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
.flex-item:nth-child(2)
{
background-color: green;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
/* Legacy Firefox implementation treats all flex containers as inline-block elements. */
#-moz-document url-prefix()
{
.flex-container
{
width: 100%;
-moz-box-sizing: border-box;
}
}
Found a solution working in Firefox, Chromium, Safari and Opera (IE untested):
http://jsfiddle.net/zKtU3/
HTML:
<div class="header">
<div class="clickable">
<div class="posrel">
<div class="description">
Some very very very very very very very very very very long description
</div>
</div>
</div>
<div class="buttons">
<div>Button1</div><div>Button2</div>
</div>
</div>
<div>
Text below
</div>
CSS:
.header
{
display: table;
width: 100%;
height: 50px;
}
.clickable
{
display: table-cell;
width: 100%;
}
.posrel
{
position: relative;
/* Vertically centering the text */
line-height: 50px;
}
.description
{
width: 100%;
position: absolute;
top: 0;
left: 0;
/* Cut text */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.buttons
{
display: table-cell;
vertical-align: middle;
/* Prevent wrapping of multiple buttons */
white-space: nowrap;
}
.buttons div
{
display: inline-block;
}
The additional div with the class posrel is needed, because firefox has got a bug when setting position: relative on table-cells: Does Firefox support position: relative on table elements?