How can I ensure text remains confined within the parent div when working with Bootstrap?

I'm having trouble keeping the text and links within their parent div.

Even though I set the outer boundary as col-sm-8, the text and links are overflowing. I'm not sure what I'm doing wrong, but the code I am using is shown below. I have already tried setting box-sizing as content-box on both the link and the paragraph without success:

<div class="col-sm-8"><!-- Begin Box -->
<div class="box">
<div class="box-thumb" onclick="window.open('/generationetfs')" style="cursor:pointer; background-image:url('/horizons/media/cssImages/ca/homepagetools/podcast.jpg');"> </div>
</div>

<h2 class="box-title"><a class="box-link" href="/generationetfs" target="_blank">Generation ETFs Podcastasasasasasasasaaaaaaaaaaaaaaaaaaaaaaaaaaaaas</a></h2>

<p>Welcome to Generation ETFs, a podcast series dedicated to the <strong>next generation of investingasaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</strong></p>
</div>
<!-- End Box -->

The issue can be seen on this page where the text is exceeding the col-sm-8 boundary:

What could I be missing in my setup?

htmlcssbootstrap-4

Answer №1

If you're dealing with long words that need to be wrapped onto the next line, consider using the CSS property overflow-wrap: break-word;. Here's an example:

.element {overflow-wrap: break-word;}

Note: Unlike word-break, overflow-wrap will only break a word if it cannot fit on one line without overflowing.

For more information, visit: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

Answer №2

To prevent text from exceeding the boundaries of its parent, utilize the CSS word-break property.

.text-container {
    word-break: break-all;
}

For further information on how to use word-break, you can check out this resource.

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

On mobile devices, the height of the absolutely positioned element is larger than its

I currently have an element with a background image that includes an absolutely positioned element at the bottom. As the screen width decreases, the height of the absolutely positioned element increases and surpasses the parent element. Since absolutely p ...

javascripthtmlcss

Retrieving the selected value from a dropdown menu without having to click on a

I'm facing an issue with 2 dropdown menus outside of an HTML table that is generated by PHP code. There's a submit button within this table, and here's how it's set up: <!doctype html> Select Year: ...

javascriptphpjqueryhtml

Can the z-index of a div be altered by a checked checkbox?

I've been trying to figure out how to make a PayPal button only clickable after the user confirms the Terms of Service. My idea is to place another div over the PayPal button with an unchecked checkbox, opacity, and z-index. When the user checks the c ...

csscheckbox

Prevent iPhone from automatically changing phone numbers to grey text color

For some reason, the iPhone keeps changing the phone numbers on my site to grey, despite using Drupal 7. I've heard that this is because the iPhone wants to make them stand out for users to interact with. I tried adding the following code to the head ...

htmlioscss

When it comes to utilizing the method ".style.something" in JavaScript

Here is some javascript code that I am working with: function createDiv(id){ var temp = document.createElement('div'); temp.setAttribute("id", id); document.getElementsByTagName('body')[0].appendChild(temp); } c ...

javascriptcsshtml

scraping text content from a CSS node using Scrapy

My goal is to extract a catalog ID number from the following webpage: from scraping.selector import Selector from scraping.http import HtmlResponse url = 'http://www.enciclovida.mx/busquedas/resultados?utf8=%E2%9C%93&busqueda=basica&id=& ...

pythoncssscrapy

Is it possible to change label text using CSS without referencing the element by its ID?

Here is a simple code snippet: <div class="delem"><label class="required" for="last_name">Full Name :</label><input id="fullname" type="text" name="fullname" value="" class="fullsize" required=""></div> <div class="delem" ...

cssreplace

Initiate an Ajax call to pre-fetch video content

I've been attempting to download a video from my own source and display a loading message while it's being downloaded. Once the download is complete, I want to hide the loading icon and have the video ready for playback. My issue lies in gettin ...

javascriptjqueryhtmlajaxvideo

What is the best way to create a div that resembles a dotted line?

I have a bar chart type created using different div elements. CSS: .outer, .inner, .target { height: 14px; margin-bottom: 5px; } .outer { background-color: #cccccc; width: 200px; margin: 0 auto; position: relat ...

htmlcss

Achieving a Photo Grid Layout with CSS

Looking for help with my CSS photogrid - it's close to what I want, but not quite there. Here's the layout I'm aiming for: 1 | 2 | 3 4 | 5 | 6 But currently, it displays like this: 1 | 3 | 5 2 | 4 | 6 I've tried tweaking the CSS but ...

htmlcss

The JQuery TextNTags plugin eliminates tag formatting once the trigger syntax has been modified

I have incorporated the JQuery TextNTags plugin into my web application. Here is the original code snippet: $.browser = { webkit: true }; $(function () { $('textarea.tagged_text').textntags({ triggers: {'!': { ...

javascriptjqueryhtmlcssjquery-plugins

Adding a backslash in Angular: Tips and Tricks

I have a question about adding a backslash to a string that is returned from a div, for example Car1 \sold. Although I am able to retrieve the status, I am having trouble adding the backslash. Here is what I have tried so far: <span>{{addBackl ...

javascriptangularjshtmlangulartypescript

Issue with background image not resizing or repeating correctly on mobile devices

My website header is not scaling properly on mobile devices, causing some issues. The background color with white text using Bootstrap and custom CSS is not extending across the screen on smartphones or when viewed in Chrome Dev Tools. As a result, two ma ...

htmlcsstwitter-bootstrap

The embedded CartoDB image header is set to have a style of "display:none"

I'm currently working on a CartoDB map showcasing my readers' summer fishing photos. Each row in the table has an image url, which I've placed at the top of the infowindow display list. I've enabled it and set the image window type to ...

htmlcsscartodb

The output when evaluating the xpath query "html/body/div/text()[1]" shows as [object Text], indicating there may be an issue with accessing the element's text using Selenium

My goal is to retrieve the value "479" from the given HTML snippet: <div data-testid="testid"> "479" " Miles Away" </div> In my Python Selenium script, the code I am using looks like this: xpath = 'html/b ...

pythonhtmlselenium-webdriverweb-scrapingxpath

Reveal a concealed div in a modal form depending on the value present in the input field

After spending the past 4 hours scouring through Google and SO, I finally stumbled upon an answer HERE that seemed to be somewhat close to what I was looking for. However, in my scenario, the <div class="fhlbinfo"> elements are not displaying or hi ...

jqueryhtml

Display items in a not predetermined order

Despite its simplicity, I am struggling to get this working. My aim is to create a quiz program using JavaScript. Here is the basic structure: <ul> <li>option1</li> <li>option2</li> <li>option3</li> </ul> &l ...

javascripthtmlcss

The initial navigation pill content failed to display in Bootstrap

I am experiencing an issue with my pills that have 4 tabs. Initially, when I reload the page, the content of the first tab does not show up. However, if I navigate to another tab and then back to the first tab, the content appears. Can anyone suggest a fix ...

jquerycsstwitter-bootstrap

CSS styling not functioning properly

After spending a considerable amount of time on this issue... <div id="pager" style="top: 5px; position: relative; " class="pager" > <form> <img src="http://tablesorter.com/addons/pager/icons/first.png" alt="first" class="first" ...

htmlcsstablesorter

Align content vertically within a div container

I have encountered an issue where I am trying to center vertically the content within a div. Here is an example of the structure: <div class="container-fluid"> <div class="row restaurant"> <div class="col-md-6"> & ...

htmlcsstwitter-bootstrapcenter