Stop the automatic resizing of a bootstrap card containing an image when the text within the card is lengthy

How can I keep the height of a card containing an image fixed, while allowing the text inside to be wrapped and shortened if necessary?

https://i.sstatic.net/r5HNG.png

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="container body-content">
<div class="card text-center">
        <div class="card-header" style="text-align:right;font-weight:bold;font-size:large" dir="rtl">
            <p style="padding-right:20px;margin-bottom:0px">Post Header</p>
        </div>
        <div class="card-body" style="padding-top:0px;padding-bottom:0px;padding-right:0px">
            <div class="row">
                <div class="col-9">
                    <p style="padding-top:20px;padding-bottom:20px;text-align:right;white-space: normal;" dir="rtl" class="card-text">
                        This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long TextThis Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text
                    </p>
                </div>
                <div class="col-3">
                    <img class="img-fluid" src="http://fakeimg.pl/200/">
                </div>
            </div>
        </div>
</div>
</div>

htmlcssbootstrap-4

Answer №1

If you want to limit the height of content and hide any overflowing text, you can use the CSS property overflow: hidden. Additionally, for a more aesthetically pleasing display, you can fade out the last few words.

.truncate-text {
  position: relative;
  height: 4.6em; /* This is equal to the height of approximately three lines of text */
  overflow: hidden;
}

.truncate-text::after {
  content: "";
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  width: 40%; 
  height: 1.7em; 
  position: absolute;
  bottom: 0;
  right: 0;
}
<link rel="stylesheet" href="https://example.com/styles.css">
<script src="https://example.com/script.js"></script>
<div class="container">
<div class="content">
        <div class="header">
            <p>Header</p>
        </div>
        <div class="body">
            <div class="row">
                <div class="col-9">
                    <div class="truncate-text">
                    <p>
                      Sample text that exceeds the fixed height and requires truncation. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    </p>
                    </div>
                </div>
                <div class="col-3">
                    <img src="https://example.com/image.jpg" alt="Image">
                </div>
            </div>
        </div>
</div>

Answer №2

One way to solve the problem is by using the CSS property overflow:hidden and dynamically adjusting the height of the div. Make sure to add onresize="myFunction()" and onload="myFunction()" to your body tag.

function myFunction()
{
var a=document.getElementById("image").height;
document.getElementById("test").style.height = a+"px";
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<body onresize="myFunction()" onload="myFunction()">
<div class="container body-content">
<div class="card text-center">
        <div class="card-header" style="text-align:right;font-weight:bold;font-size:large" dir="rtl">
            <p style="padding-right:20px;margin-bottom:0px">Post Header</p>
        </div>
        <div class="card-body" style="padding-top:0px;padding-bottom:0px;padding-right:0px;max-height:200px !important;">
            <div class="row">
                <div class="col-9" style="overflow:hidden;" id="test">
                    <p style="padding-top:20px;padding-bottom:20px;text-align:right;" dir="rtl" class="card-text">
                        This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long TextThis Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text
                    </p>
                </div>
                <div class="col-3">
                    <img class="img-fluid" src="http://fakeimg.pl/200/" id="image">
                </div>
            </div>
        </div>
</div>
</div>
</body>

I hope this solution proves to be useful!

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

Incorporating FaceBook into a PhoneGap Application

Currently, I am working on integrating Facebook into my phonegap/cordova application. To guide me through the process, I am using the resources provided in this link: https://github.com/davejohnson/phonegap-plugin-facebook-connect/ Even though I have bee ...

javascripthtmlfacebookcordova

Utilizing HTML's multiple input type color feature to save selected colors directly to the database

I am currently using the input type color to select colors for customizing my site. I save the selected color to a database and then retrieve it to apply it to different areas of the site. This works well for a single input type color, but now I have mul ...

javascriptphpjqueryhtmlajax

Bootstrap: Utilizing a full width grid system with columns contained within a container

Looking to design a unique layout that spans the full width of the page, featuring a blue half on the left and a red half on the right. Next, I would like to insert text into the layout, but within a container element. Is this doable? UPDATE: Notice that ...

csstwitter-bootstraptwitter-bootstrap-3gridbootstrap-4

Struggling to grasp the concept of fit-content? Let me

For my personal project, I am creating a simple react webpage. To incorporate zoom capabilities, I decided to use the library called React-zoom-pan-pinch. Initially, without implementing this library, my SVG element filled the screen in red, which was the ...

htmlcssreactjssvg

Query for selecting SVG elements within an <object> tag using Jquery

I've successfully implemented an SVG with linearGradient elements that change on button click, you can check it out here. Now, I'm facing a challenge. How can I achieve the same functionality if the SVG file is external and called within an <o ...

jqueryhtmlobjectsvg

Displaying consistent headers on all printed pages in Chrome browser using Vue.js

Hey there, I'm currently working on code to print the page in my Vue web application. I want to have a static header appear on every page, either by using CSS or JavaScript. I've created a header div component and set its position as fixed. It&ap ...

javascripthtmlcssvue.js

What is the best method to eliminate white borders on a bootstrap card? Adjusting the border color has proven to be ineffective

<!Doctype html> <html5> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Creative Designs Hub</title> <link rel="sty ...

csshtmlbootstrap-4

Attempting to achieve dynamic text changes in the Bootstrap dropdown button based on the selected item

I am currently using Bootstrap to style a dropdown button, and I want the button text to change based on the item selected from the dropdown. I believe that using JavaScript is the most effective way to achieve this, but I am not very familiar with it ye ...

javascripthtmlbuttonbootstrap-4

Email link with attached file

For my client, I developed an application that delivers a zip file with the following structure: index.html /files/ file.pdf /inc/ style.css The purpose of this app is to allow users to transfer the zip file to their iPad or iPhone using Sites- ...

phphtmlemailattachmentmailto

A guide on retrieving an object and showcasing it in HTML using JavaScript

Can someone share a method to iterate through an object array in JavaScript? I have an array called sample where the property options needs to be displayed using lit-HTML for each object. var sample = [{ "trans": [{ "id": "trans", "fee": 20, ...

javascripthtmlarraysobjectlit-element

Using Yii2, create a button with an onclick event that executes a JsExpression

I need to submit a form with an array of elements whose number is unknown. class DynamicForm extends Model { /** var string[] */ public elements[]; } In the view where the form submission takes place, I want to include a button that triggers a Ja ...

javascriptphphtmlyii2yii2-advanced-app

Expanding the background color of a Div within a Grid System

Note: Utilizing the skeleton grid system. I'm trying to expand the background color of a specific div beyond the 960px container, but I'm facing some difficulties. Any ideas? Current: Desired outcome: HTML: <!DOCTYPE html> <!--[if l ...

csshtmlgridskeleton-css-boilerplate

Utilizing Bootstrap's Multi-Grid System

I am currently working on implementing a Bootstrap grid design that resembles pic1.jpg. However, I am facing challenges in achieving the desired layout, as pic2.jpg shows the current scenario. Below, I have shared the code I am using. pic1.jpg :- ! pic2. ...

javascripthtmlcsstwitter-bootstrap

What should be in the header of your Outlook email signature?

For a while now, I've been attempting to create a specific design for my email signature but have hit a wall. It seems like the image I want to include above the first line of text is causing some trouble and it doesn't quite work as intended. T ...

htmlcssoutlooksignature

Enhance your website's user experience by implementing Bootstrap breadcrumb styling integrated

I am a beginner with bootstrap and currently trying to customize the breadcrumb styling. I attempted the following code which resulted in the desired inline layout. <div class="BreadCrumbs"> <a href="www.yahoo.com" >Yahoo</a&g ...

htmlcsstwitter-bootstrap

Tips for properly nesting a "carousel" div within an "oe_structure" without any overlapping issues

Having trouble with placing a "carousel" div inside the "oe_structure" in my odoo template. I am currently working on editing the "website_sale.products" template. As a newcomer to Odoo, can I use inheritance in my direct code to make edits? I'm stil ...

csslayoutbootstrap-4carouselodoo-13

Having issues with PHP not displaying your SQL query results?

Can someone lend a hand? I'm attempting to add some content as per the requirement of stackoverflow for more text instead of just code. ...

javascriptphphtmlsql

In IE, the hover state of the background color and sub menu is frequently toggling

I've been struggling with this issue all week. I have a CSS dropdown menu that uses both standard lists and content boxes as sub menus. The problem lies in IE, where each LI has an anchor tag that is set to display block in order to fill the parent LI ...

htmlcssinternet-explorer

What could be causing the closest() method in my JavaScript code to not locate the nearest class?

I've encountered an issue while dynamically creating new classes with input fields in my project. For some reason, when I try to remove a previous row, nothing happens. Can anyone help me troubleshoot this problem? Here is the JavaScript code that I ...

javascriptjqueryhtmlcss

Navbar not aligning properly with Bootstrap justify-content option

<nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-start"> <a class="navbar-brand" href="#"><img src="images/logo.png"></a> <button class="navbar-toggler" type="button" data-toggle ...

htmlcssbootstrap-4navbarjustify