Avoid text being abruptly cut off by the overflow:hidden property when utilizing flexbox column layout

I am looking to design a fixed height card that includes a title, body, and footer. The title and footer may consist of multiple lines, while the body text should expand to fit the remaining space.

.card {
  display: flex;
  flex-direction: column;
  height: 192px;
  width: 300px;
  border: 1px solid;
  padding: 12px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.body {
  flex: 1 1 auto;
  overflow: hidden;
  overflow-wrap: break-word;
  word-wrap: break-word;
  margin-bottom: 8px;
}
<div class="card">
  <div class="title">
    This is a title
  </div>
  <div class="body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div>
    footer text
  </div>
</div>

Is there a way to prevent the body text from being truncated? It seems like overflow-wrap and word-wrap are having no effect.

cssflexbox

Answer №1

To ensure proper alignment, it is crucial to set the height as a multiple of a single line's height. Utilizing CSS grid provides a simple solution:

Observe the dynamic resizing effect by adjusting the main container:

.card {
  display: flex;
  flex-direction: column;
  height: 192px;
  width: 300px;
  border: 1px solid;
  padding: 12px;
  overflow: hidden;
  resize: both;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.body {
  flex: 1 1 auto;
  margin-bottom: 8px;
  line-height: 1.2em; /* ensuring same as line height */
  display: grid;
  grid-template-rows: repeat(auto-fit, 1.2em); /* matching line height */
  grid-auto-rows: 0;
}

.body>div {
  grid-row: 1/-1;
  overflow: hidden;
}
<div class="card">
  <div class="title">
    This is a title
  </div>
  <div class="body">
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
  <div>
    footer text
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

horizontal Bootstrap Image Gallery

I'm having an issue with Bootstrap Thumbnails. Currently, my thumbnails are stacked vertically like this: img01. However, I want them to be in a horizontal layout. What should I do? This is my code: HTML: <div class="hrs" align="center"> ...

htmlcsstwitter-bootstrap

switching the color of a path in an SVG when hovering over a

In the midst of working on SVG, I'm trying to implement a color change effect upon hover. The desired functionality is such that when hovering over the .business div, the color of the SVG business path should also change accordingly as specified in th ...

javascriptjqueryhtmlcsssvg

Tips for positioning text underneath an image with HTML and CSS

I'm attempting to align two links below an image as text. The HTML I have works perfectly in Chrome and Firefox, but not in IE, where 90% of our internal users are. Here is the code: <div style="float: right;"><img src="sites/default/files/ ...

htmlcssdrupaldrupal-7

Troubleshooting CSS keyframe animation issues in IE and Edge

I have created an animation that works perfectly in all browsers except for IE and Edge. You can view the page here. .progress-container { position: relative; } .background-progress-bar, .progress-bar { width: 100%; height: 10px; top: 0px; left ...

htmlcssinternet-explorercss-animationsmicrosoft-edge

The div and class elements are not appearing on the screen

I am currently working on implementing a barcode feature on my website, but I have encountered an issue with the div element having the class "b128" not displaying as intended. Interestingly, when I tested the same code on a different website, it appeared ...

phphtmlcssbarcode

Is there a way to ensure that an image stays pinned to the bottom of the screen, regardless of the device or screen

Looking for a solution to keep an image centered at the bottom of a website page regardless of screen size? I've tried different recommendations from Stack Overflow without success. position:fixed; bottom:0px; left:50%; Still struggling to make it wo ...

csscss-positionresponsiveresponsive-images

Troubleshooting CSS and HTML Spacing Challenges

Greetings! I am currently working on implementing a menu bar on the left-hand side of my webpage. However, I've encountered an issue where the menu bar is causing all the HTML content below it to be misaligned. Additionally, the menu bar appears visi ...

htmlcsspositionedit

Divs are being obstructed by the navigation bar

I am seeking a solution to prevent div elements from being positioned below my navigation/information bar when the screen width is minimized. The information bar has a height of 1200px and I would like it to stay on the left side without any overlapping fr ...

htmlcss

Adjusting the size of MaterialUI SVG icon: a simple guide

Hey everyone, I'm having some trouble trying to make this MaterialUI icon larger. I've attempted changes with the viewbox and inline styling, but no luck so far. The current size of the icon isn't cutting it for me, I need it to be bigger. ...

javascriptcssreactjsmaterial-ui

Guide to implementing a seamless Vue collapse animation with the v-if directive

Struggling with Vue transitions, I am attempting to smoothly show/hide content using v-if. Although I grasp the CSS classes and transitions involved, making the content appear 'smoothly' using techniques like opacity or translation, once the anim ...

cssvue.jsvuejs2transition

Show avatar display name (default) in Canvas if image is unavailable

Is there a way to show an avatar by using the first letters of a name, similar to what Google does when the actual image is not available? https://i.sstatic.net/EMozW.png ========> https://i.sstatic.net/WfWN2.png I am looking for a solution that involv ...

javascripthtmlcsscanvashtml5-canvas

Tips for preventing an element from scrolling horizontally along with the page body

This is the structure of my HTML: <div class='header-wrapper'> <div class='title'>Title</div> </div> <div class='some-wide-content'> </div> Let's imagine a scenario where the br ...

htmlcss

What about using CSS sprites in place of individual images?

After examining the code for some major websites, such as YouTube and Yahoo, I noticed that they tend to rely heavily on CSS sprites rather than individual image tags. Is this considered a best practice in web development? While using image tags with alt a ...

cssimagesprite

The styling in CSS does not accurately reflect its relationship to the parent

My code includes a div with the ID of "outer" nested inside a parent div with the ID of "Container". I'm attempting to adjust the properties of the outer div relative to its parent, meaning its width, height, and other attributes should be based on th ...

htmlcssparent-child

Utilizing Material-UI for CSS styling in a live environment

My application has a 'dashboard' feature that utilizes material-ui. Within this dashboard, other apps are called and rendered. While this setup functioned smoothly during development, I encountered issues once switching to a production build. The ...

cssreactjsmaterial-ui

Using CSS and jQuery to create dynamic image animations

I've implemented social buttons that change the image on hover and it's working perfectly. Check out the Fiddle here <a href="#"> <img src="http://i.imgur.com/TLGeYXo.png" class="social-icons social-fb "/> </a> This is my C ...

jquerycssanimationcss-transitions

Why does the script run fine within the HTML but fails to work externally?

I recently created a script for my navigation bar that turns it into a sticky navigation once it reaches the top of the page. Everything works perfectly when I include the script directly in my index file using <script> tags. However, when I try to ...

javascriptjqueryhtmlcss

Locating Substrings with CSS Selectors

Looking for a CSS Selector that can handle varying item numbers like span[label='./cakes/item1/./linkText']. I need one selector that works with any range of numbers. I checked out a tutorial on this but no success. The attempted solution was: ...

cssseleniumcss-selectors

SVGZ is not visible on the screen

When testing SVGZ format locally on Google Chrome, it works perfectly but doesn't seem to function on other browsers. Regular SVG works fine though. However, when uploaded to the server, it fails to work. I attempted to resolve this by adding the foll ...

htmlcsssvgsvgz

Experimenting with combining a CSS class alongside the Nth-child selector

Hello, I've been researching various sources including Stackoverflow on how to effectively use an Nth child selector and a Class together but have not had much success so far. In essence, my menu consists of Main categories (class = cat) and subcateg ...

csscss-selectors