logo
down
shadow

CSS: display: flex and text ellipsis on the same element


CSS: display: flex and text ellipsis on the same element

Content Index :

CSS: display: flex and text ellipsis on the same element
Tag : css , By : Ronnie Carlin
Date : November 24 2020, 03:41 PM

I hope this helps . 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>

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

3 column display:flex layout with overflow:ellipsis


Tag : html , By : CrimsonGore
Date : March 29 2020, 07:55 AM
will be helpful for those in need Important part is to use flex: 1 and overflow: hidden on .details and white-space: nowrap, text-overflow: ellipsis on .address
#container .list ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}

#container .list li {
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #a1d1b8;
  display: flex;
  justify-content: space-between;
}

#container .list li > div {
  vertical-align: middle;
}

#container .list .type {
  padding-right: 15px;
  flex: 0 0 50px;
  background: green;
}

#container .list .type i {
  font-size: 40px;
}

#container .list .details {
  flex: 1;
  overflow: hidden;
  font-family: "Courier New";
}
.address {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#container .list .value {
  padding-left: 15px;
  font-size: 55px;
}

#container .list .details .date {
  font-weight: bold;
  margin-bottom: 5px;
}
<div id="container">
  <div class="list">
     <ul>
       <li>
        <div class='type'><i class='fa fa-arrow-circle-right'></i></div>
        <div class='details'>
          <div class='date'>date</div>
          <div class='address'>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
         </div>
         <div class='value'>1.2</div>         
       </li>
     </ul>
  </div>
</div>

Issues combining display:flex, tables, and text-overflow: ellipsis


Tag : html , By : user165781
Date : March 29 2020, 07:55 AM
will help you You should switch to the other table layout algorithm: table-layout: fixed, the one that does what the author (you) says and doesn't try to adapt automagically to content. If you're having problems with widths set, try to set them on first row.
Also max-width property on cells has no effect AFAIK. Oops no, it's undefined behavior. I changed it to width: 55% which is kind of fine here on SO but I guess your page is larger than snippets here so YMMV.
/* flex layout */
.flex-space-between {
  display: flex;
  justify-content: space-between;
}
.flex-space-between > div {
  width:100%;
  flex: 1 1 auto;
}
.flex-with-gap { margin: -14px -7px; }
.flex-with-gap > div { margin: 14px 7px; }


/* colouring and other styles */
.flex-space-between > div {
  box-sizing:border-box;
  background-color:white;
  border: solid 1px #999;
  padding: 0.5em;min-width: 0;
}
body { font-family: sans-serif }

.truncate {
  width:100%;
  display: inline-block;
  color:red;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.t1 {
  width: 100%;
  border-collapse:collapse;
  table-layout: fixed;
}
.t1 TD, .t1 TH {
  border:1px dotted blue;
}
.t1 TH {
  text-align:left;
  font-weight:normal;
}
.t1 .number {
  text-align:right;
  font-size: 180%;
  color:#66F;font-weight:bold;
}
.t1 .text {
  width: 55%;
  background: yellow;
}

.info { color: blue; font-style:italic;}
<div class='flex-space-between flex-with-gap'>
  <div>
    <div class='truncate'>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</div>
    <p class='info'>The div.truncate element above truncates fine.</p>
  </div>
  
  <div>
  <div class='flex-space-between'>
     <div class='truncate'>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</div>
    <div class='truncate'>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</div>
    </div>
    <p class='info'>So do the above which are contained inside sub-flexboxes.</p>
  </div>

  <div></div>
  <div></div>
</div>

<div class='flex-space-between flex-with-gap'>
  <div></div>
  <div>
   <table class='t1'>
  <tr>
    <th class='text'>Locations</th>
    <td class='number'>123</td>
  </tr>
  <tr>
    <th class='text'>Divisions</th>
    <td class='number'>123</td>
  </tr>
  <tr>
    <th class='text'>Business Units Business Units Business Units</th>
    <td class='number'>80</td>
  </tr>
  </table>
  <p class='info'>Now, I'm wanting to place a small table in my flex items as above (lists of text and numeric values) but I want the text (e.g. Business Units) to truncate if has to, and not wrap.</p>
  </div>
  
  <div>
  <table class='t1'>
  <tr>
    <th class='text'>Locations</th>
    <td class='number'>123</td>
  </tr>
  <tr>
    <th class='text'>Divisions</th>
    <td class='number'>123</td>
  </tr>
  <tr>
    <th class='text'><div class='truncate'>Business Units Business Units Business Units</div></th>
    <td class='number'>80</td>
  </tr>
  </table>
  <p class='info'>But this is what now happens when trucating. The "white-space: nowrap;" kicks in but not the "overflow: hidden;" nor "text-overflow: ellipsis;".</p>
    <p class='info'>
    I think truncating text inside a TD/TH is the problem but not sure why.
  </p>
  </div>
  <div style='opacity:0.9'></div>
</div>

<div class='flex-space-between flex-with-gap'>
  <div>100%</div>
</div>

<div class='flex-space-between flex-with-gap'>
  <div>33%</div><div>33%</div><div>33%</div>
</div>

<div class='flex-space-between flex-with-gap'>
  <div>50%<br>Multi-line line</div><div>50%</div>
</div>

<div class='flex-space-between flex-with-gap'>
  <div>25%</div><div>25%</div><div>25%</div><div>25%</div>
</div>

Why doesn't text-overflow: ellipsis not work with display: inline-flex in Firefox?


Tag : html , By : 66.
Date : March 29 2020, 07:55 AM
I wish did fix the issue. I was able to reproduce your issue. Turns out the issue was with the display:inline-block; property. Below is the part that I modified:
#breadcrumbs a,
#breadcrumbs span {
  /*display: inline-block;*/
  text-decoration: none;
}

CSS: display: inline-flex and text-overflow: ellipsis not working togethier


Tag : html , By : Fernando
Date : March 29 2020, 07:55 AM

Combining text-overflow:ellipsis with display:flex


Tag : html , By : user160048
Date : March 29 2020, 07:55 AM
Related Posts Related QUESTIONS :
  • How do I make the footer stretch vertically downward align to footer
  • Margically appearing margin in footer. Could use some fresh eyes on this
  • Overlapping 2 Flash objects and controlling z-index
  • element "iframe" undefined - Errors found while checking this document as XHTML 1.0 Strict!
  • Losing information when using BeautifulSoup
  • How to fit a two View components inside a View component with borderRadius?
  • Background - single diagonal stripe
  • Styling arrow in Select Box
  • How to make css where arrows overlap with eachother?
  • Pure CSS interactive human body
  • Font awesome background color is overflown
  • Transitioning opacity from 0 to .9 works with toggling visibility from hidden to visible, but not the other way around
  • Understanding relative position in css
  • How to hide a rectangle where horizontal and vertical scroll bars converge?
  • Where does filter:invert(1) go in shorthand background image css
  • How to evenly add borders around table?
  • How do I get this element in css
  • How to refactor common css rules in media queries?
  • Focus outline not displayed on a div with mask-image CSS rule in Firefox
  • Removing a redundant parent class in LESS?
  • Override CSS of component selector style from ng module
  • How do I move (center) an svg icon?
  • Styling a chamfer / scooped rectangle with a border
  • css animation to happen when on scroll, not when pages loads
  • How to make my flexbox elements divide the total height of the container?
  • CSS Only Pie Chart - How to add spacing/padding between slices?
  • Not able to style nested animations with keyframes with styled-components
  • How to inspect pseudo elements using Internet Explorer 11 developer tools
  • How to fit innerHtml into a p tag
  • How can i make border for active class nav-item in bootstrap 4?
  • Mixing Multiple conditions in a Single NgStyle Tag?
  • I need an element to be a child of other without inheriting certains properties
  • React - JSS have element fade in when rendered
  • Chrome's hidden CSS scroll-snap threshold and how to change it
  • Why can't I see my linear gradient over my background image?
  • Trying to hide a div using CSS
  • How to import css to only one component?
  • Best practices for styling an element that can be positioned anywhere in a page
  • should i use media queries for responsive design with react?
  • Color words ending with a digit?
  • Long Text inside Table Cell Overflow
  • Center text in column/vertically, CSS Grid
  • MDC-Web CSS theme colors not defined
  • css transform + width + left + top transition jump on safari browser
  • How to correctly position vertical oriented text on a div?
  • Why does position: sticky; not work in react?
  • Is there a way to snake/queue the flow of items in a CSS Grid?
  • two screen widths: 375px and 1024px
  • React native - Highlight a TextInput if it's empty on form submit
  • How to get the css property of a tags in testcafe?
  • Cropping the top 10% of an image using CSS?
  • how to keep a footer at the bottom of the page, even if the content grows?
  • Firefox: How to test prefers-color-scheme?
  • Is there anyway to remove the shadow, or force vuetify menu to fully align with the left side of the screen?
  • How do I convert CSS to Styled-Components with input[type="submit"] attribute?
  • How to Bold first line of :before content in Firefox?
  • Changing diameter of Angular material spinner breaks it
  • Automatically suffix every style with !important
  • Define a class is not working globally but locally it is
  • css does not work on selected row of a tableview in order to change the text color
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com