Tips to stop excessively long text from overflowing its containing div

Let's fit as many text lines as the div's height allows.

<div class="row g-0">
  <div class="col-md-3 align-content-center">
    <div class="d-flex justify-content-center">
      <!-- svg image -->
    </div>
  </div>
  <div class="col-md-9 align-content-center">
    <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5>
  </div>
</div>

Desired result:

|     | Lorem ipsum dolor |
| SVG | sit amet,         |
|     | consectetur ad... |

I've been experimenting with different properties but haven't found a solution.

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-height: inherit;
position: absolute;

Is there a solution using only Bootstrap classes?

Thank you.

htmlcssbootstrap-5

Answer №1

The text-truncate class performs the same function as the unused text-truncate-alt-1 mentioned below.

Although the CSS rules defined are not utilized, they serve as alternative methods.

.text-truncate-alt-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-truncate-alt-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d6f6262797e797f6c7d4d38233d233f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="57353838232423253627176279677965">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="row g-0">
  <div class="col-md-3 align-content-center">
    <div class="d-flex justify-content-center">
      <svg xmlns="http://www.w3.org/2000/svg"
          height="140" width="150" style="background:rgba(0, 0, 0, 0.2)">
        <polygon points="75,7.5 129,38.5 129,101 75,132.5 21,101 21,38.5" style="fill:lime;stroke:green;stroke-width:1.5" />
        Sorry, your browser does not support inline SVG.
      </svg>
    </div>
  </div>
  <div class="col-md-9 align-content-center">
    <h5 class="card-title text-truncate">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit
      Lorem ipsum dolor sit amet, consectetur adipiscing elit
      ...
    </h5>
  </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

Tips for creating animated card designs with HTML, CSS, and JavaScript

As I delve into the realm of CSS animation, my primary focus is on replicating the captivating card shuffling animation showcased at Here's a glimpse of the progress I've made so far: https://youtu.be/GDIJ2K22cnY While I've successfully im ...

javascripthtmlcssfrontend

Why is the Footer component in Next.js Styling not staying at the bottom of the screen as intended?

Why is the Footer component not at the bottom of the screen in Next.js Styling? import Head from "next/head"; import Navbar from "./Navbar"; import Footer from "./Footer"; const layoutStyle = { display: "flex", flexDirection: "column", height: "10 ...

cssreactjsnext.js

Having issues with email verification and the length of phone numbers not functioning properly

I need to validate two text fields before registration: the email must be in correct format and the number must have exactly 11 digits. Any mismatches should trigger an error message. For the email validation, I used a function that checks for the require ...

javascripthtml

Validation of forms in JavaScript, submission only occurs if the data is deemed to be

I am currently working on a JavaScript validation for a Perl form. The validation script is working correctly to display errors when data is missing. However, I am facing an issue where the form still submits after displaying the error messages. I believe ...

javascripthtmlformsfunctionvalidation

What is the best way to display a background image within my div element?

I'm trying to create my first child inside the div.missions, but it's not displaying. The only thing showing is the background color of the second child. Can someone assist me with this issue? Let me share my code with you: Here's my HTML: ...

htmlcss

What methods can be used to crop and style images in a similar manner using html and css?

Is there a way to replicate this specific method? I attempted to achieve the same look by using CSS masking, but the results weren't pleasing. Does anyone have suggestions on how to accomplish this using HTML/CSS? ...

htmlcssimagestylesheet

The font styles in IE are failing to render properly following the disabling of caching in Node JS

Why are the CSS fonts not working in Internet Explorer after disabling cache in Node JS? After a user navigates to a page and then clicks the back button to return to the previous page, the font styles are not rendered properly in IE 11. The code 'k ...

cssnode.jsinternet-explorercachingkoa

Having trouble importing font-face in scss

Currently, I am working on incorporating a Google font into my project. This is the desired outcome: https://i.sstatic.net/jIO7q.png However, the actual result is different: https://i.sstatic.net/V2KhW.png The code snippet in App.vue looks like this ...

javascriptcssvue.jssassfonts

Having difficulty upgrading from BootStrap 3 to BootStrap 4

Need assistance updating from BootStrap 3 to BootStrap 4 on my local server. After trying to update, I ended up with a result that still reflects BootStrap 3. https://i.sstatic.net/Bs9H0.jpg Here's the code snippet I used for linking: <link rel=& ...

htmlcsstwitter-bootstrap

Is it frowned upon or considered incorrect to achieve a horizontally centered page by adjusting the CSS properties of the html tag?

Is it considered wrong or frowned upon to center a webpage horizontally by adjusting CSS properties of the HTML tag? Sample CSS code: <style type="text/css"> html { width: 1200px; margin: 0px auto; background-color: ...

css

Having trouble getting my soundboard to work properly on mobile devices

I recently created a soundboard using HTML5, CSS3, and JavaScript. While the audio plays back perfectly on my computer when I click the buttons, I encounter an issue when trying to use it on a smartphone. <!DOCTYPE html> <html lang="en"> <h ...

javascripthtmlcssmobile

What could be the reason for the page consistently refreshing on localhost:3000 instead of navigating to localhost:3000/zipcode and so on?

Whenever I hit Enter or click the "Search" button, it stays on the localhost:3000 page and doesn't switch to /zipcode. Upon hitting Enter, my terminal displays: Started POST "/zipcode" for ::1 at 2023-04-20 19:26:35 -0400 Processing by HomeController ...

ruby-on-railsrubybootstrap-5ruby-on-rails-7

Images within inline blocks appear to be extending beyond their containing div as though they are

When I check my website in various browsers such as Firefox, IE, Edge, and Safari, I noticed that the images in the "My Specialties" section of the left column are extending outside of the div instead of fitting within it. This problem also occurs in Chrom ...

javascriptjqueryhtmlcss

Utilizing CSS3 Pseudo Elements for Styling a Graph

I'm struggling to achieve the desired look of my ancestor chart using an unordered list format. Initially, I borrowed code from CSS3 Family Tree, but found it to be more like an organizational chart rather than a family tree. For testing purposes, he ...

htmlcsspseudo-element

Flipping over every single card, but only desire to flip them one at a time

My attempt to flip these cards individually has resulted in them all flipping together. I suspect there may be an error in my JavaScript code. In the original code, I used images in front and an unordered list in the back, but here I have simplified it t ...

javascripthtmljquerycss

Creating a simulated loading screen

I have created a preloader page for my website following tutorials, such as the one found here: https://codepen.io/bommell/pen/OPaMmj. However, I am facing a challenge in making this preloader appear fake without using heavy content like images or videos. ...

javascripthtmlcsssettimeoutpreloader

Sitelinks and a brief description appear beneath the website name when it is displayed in search

Is there a way to incorporate "metadata" (green and red lines in the image below) into a website? I might not have the correct term for it, so my apologies in advance. I attempted changing the following tag in the index.html file, but I am uncertain if thi ...

htmlmeta-tags

What is the rationale behind the preset margin on the <body> tag?

Throughout my years in development, I have primarily focused on front-end web UI development. One recurring issue that has always irked me is the constant need to reset default browser styling assumptions, which often slips my mind until it starts affectin ...

htmlcss

The positioning of the Zorro table column remains flexible despite the presence of nzLeft

I am currently developing a project using Angular. Within one of my components, I have a table that displays some data. This table is generated by the ng-zorro table module. However, I've encountered an issue where setting a table column or header wi ...

htmlcssangularng-zorro-antd

Is it unwise to conceal the horizontal scrollbar?

My webpage includes a jquery slideshow using the jquery circle plugin, featuring the "shuffle" option. var slideshow = $('#slider').cycle({ fx: 'shuffle', shuffle: { top: 0, left: 1300}, .... When the images move out ...

jqueryhtmlcssscrollbar