CSS: Avoiding text overflow in a div container

Utilizing Bootstrap 4, I have a div containing lengthy text that causes overflow within the element.

The issue is depicted in this image example.

By introducing spaces to shorten words, the text displays correctly without overflowing.

However, extended words such as "hhhhhhhhhhhhhhhhhhh" lead to overflow like in the illustration.

This is my code:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="p-1 mt-4 d-flex flex-wrap">
    <div class="p-1 m-1 d-flex flex-content-around shadow-lg p-2 mb-4 bg-white rounded box">
        <div class="my-auto">
            <img alt="pokemon pic" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/66.png" />
        </div>
        <div class="p-1 d-flex flex-column">
            <div class="p-0">
                <h3>Macgoooooo</h3>
            </div>
            <div class="p-0 d-flex flex-column flex-wrap">
                <div class="p-0">
                    <span>cought at</span>
                </div>
                <div class="p-0">
                    <small>2019-09-01</small>
                </div>
            </div>
        </div>
    </div>
</div>

I am seeking guidance on how to ensure that the text remains within the boundaries of the flexbox.

htmlcssbootstrap-4

Answer №1

The code is functioning correctly, but if you encounter any issues, consider adding the following CSS:

h3{
  word-break: break-all;
}

This CSS rule will ensure that long words are broken appropriately to maintain readability across multiple lines.

Answer №2

.trim {
  size: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Ensure to match the width attribute with the actual width of the container.

Answer №3

Implement the overflow-wrap: break-word; CSS property as shown below:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="p-1 mt-4 d-flex flex-wrap">
    <div class="p-1 m-1 d-flex flex-content-around shadow-lg p-2 mb-4 bg-white rounded box">
        <div class="my-auto">
            <img alt="pokemon pic" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/66.png" />
        </div>
        <div class="p-1 d-flex flex-column" style="display:inline-block; word-break: break-word;">
            <div class="p-0">
                <h3>Macgoooooo</h3>
            </div>
            <div class="p-0 d-flex flex-column flex-wrap">
                <div class="p-0">
                    <span>cought at</span>
                </div>
                <div class="p-0">
                    <small>2019-09-01</small>
                </div>
            </div>
        </div>
    </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

The functionality of .bind() is malfunctioning on both Microsoft Edge and Google Chrome browsers

Everything seems to be running smoothly on Mozilla (version 103.0), but unfortunately, it's not performing as expected on Chrome or Microsoft Edge. $('#loading').bind('ajaxStart', function () { $(this).show(); }).bind('ajaxS ...

javascripthtmljquery

What are some effective replacements for SoundManager2 worth considering?

While Soundmanager2 is a useful app, many find the code to be overly complex and difficult to navigate. It almost seems as if it was purposely written in a way to confuse rather than clarify. Are there any recommended alternatives to Soundmanager2 that are ...

javascriptflashhtmlaudiosoundmanager2

The scrolling action triggered by el.scrollIntoViewIfNeeded() goes way past the top boundary

el.scrollIntoViewIfNeeded() function is used to scroll to element el if it's not within the visible browser area. Although it generally works well, I have encountered some issues when trying to use it with a fixed header. I have provided an example s ...

javascripthtmlcssscroll

Display a pop-up upon clicking a button

I've created a custom popup form using Flodesk and added the corresponding Javascript Snippet to my website just before the closing head tag. <script> (function(w, d, t, h, s, n) { w.FlodeskObject = n; var fn = function() { (w[n] ...

javascripthtmlshopify

Retrieve information from Node.js using Express

I am working on a server with Node.js and using Express to create a web application. I have successfully implemented a function called rss_interrogDB that retrieves an array from a database. Now, I am trying to use this array to display a list on the HTML ...

javascripthtmlajaxnode.jsexpress

Is there a way to adjust the size of a video thumbnail to fit within a

Currently, I am developing a system to remotely control home electrical devices via the web. However, I am facing an issue with fitting camera images properly within their container. https://i.sstatic.net/Yct2d.png How can I ensure that the video thumbna ...

htmlcssreactjs

Showcasing all elements of an xml through jquery while implementing a filter

Trying to implement a filter on XML using jQuery. The filtered results are showing based on the condition, but facing difficulty in displaying all XML items when the flag is set to 0; meaning that when the flag is zero, all XML items should be displayed ...

jquerycsshtml

Issues with Jquery datatable causing column header to overlap the table header

I am facing an issue with my datatable as the table is not displaying correctly. Could someone advise me on how to troubleshoot and fix this problem? Below is the code snippet in question: $(tbName).dataTable({ "sScrollX": "100%", "sScro ...

jquerycssdatatables

Adaptable positioned picture

I'm trying to figure out how to make a series of positioned images adjust to the window's dimensions. Should the images be relative and the page wrap absolute, or vice versa? I've been experimenting on jsfiddle but can't seem to get it ...

htmlcssimageresponsive-design

JavaScript | Calculating total and separate scores by moving one div onto another div

I have a fun project in progress involving HTML and Javascript. It's a virtual zoo where you can drag and drop different animals into their designated cages. As you move the animals, the total count of animals in the zoo updates automatically with the ...

javascripthtmlcountdrag-and-dropdrop

Storing an ID field across different domains using HTML and JavaScript: Best Practices

Currently, my web app includes a conversion tracking feature that analyzes whether activity "A" by a website visitor leads to action "B." This feature works effectively when the tracking is contained within a single domain but encounters issues across mul ...

javascripthtml

Display a different string from an array at random, revealing each one gradually with a time delay

Looking for a way to display strings randomly without replacing one with another? I need a script that can shuffle words in a list and present them in a random order, with the ability to adjust the delay between each word. If you have a more effective code ...

javascripthtmljquery

Stop the recurrence of multiple clicks by incorporating a Bootstrap modal popup confirmation

$('button[name="remove_levels"]').on('click', function (e) { var $form = $(this).closest('form'); e.preventDefault(); $('#confirm').modal({ backdrop: 'static', ...

javascriptjqueryhtmlmodal-dialogbootstrap-modal

Adjust image size while maintaining aspect ratio

Currently, I am implementing a resize function for an image by using the following code snippet: $('.image_resize').each(function(){ var ww = $(window).width() - 80 - 400; var wh = $(window).height() - 60; var iar = $(this).attr(&apo ...

javascriptjqueryhtml

Separate your HTML code and move it to a different HTML document within Angular CLI

Is there a way to extract my HTML section from the file app.compontent.ts and place it in a separate HTML document? I've tried adding the HTML code directly into the generated class app.component.ts but it doesn't seem to work. I'd also lik ...

htmlangular

p5.js experiencing issue: Uncaught TypeError - Unable to access property 'transpose3x3' due to null value

I have a simple website built with Flask where I am running several p5.js sketch animations, and everything is working smoothly. However, when I try to add a new sketch that utilizes WEBGL, I encounter the following error: Uncaught TypeError: Cannot read p ...

javascriptpythonhtmlflaskprocessing

Harvesting data from an HTML document using BeautifulSoup and Python

I am currently working on extracting text from an HTML file. The HTML file has the following structure: <li class="toclevel-1 tocsection-1"> <a href="#Baden-Württemberg"><span class="tocnumber">1</span> <span class= ...

pythonhtmlbeautifulsoup

What is the best way to enable a css class for an image in Sitecore Field Renderer?

I am working with Sitecore (7) & MVC and need guidance on how to include a css class attribute for an image using a field renderer in Sitecore. Here is the HTML structure without Sitecore: <div class="background-container"> <img src="/images/ ...

cssasp.net-mvcsitecoresitecore7sitecore-mvc

JavaScript Equivalent of jQuery's removeClass and addClass Functions

I am faced with the challenge of rewriting the following code without using jQuery: document.querySelector('.loading-overlay').classList.remove('hidden'); Can anyone provide guidance on how this can be achieved? ...

javascriptjqueryhtmlcss

Incorporating a Bootstrap Modal (Pop-up window) into the Navbar of a

How can I successfully integrate a Bootstrap Modal into my Django Navbar? Despite following the official Bootstrap documentation, I am encountering issues in my Django project. Is there a way to make this work? <!-- Button trigger modal --> <bu ...

djangobootstrap-4