the words have escaped the container

My problem is that when I minimize the browser width, the spans overflow the div. See https://i.sstatic.net/P15y2.png

Is there a way to automatically change the line (without using br tags) as shown here: https://i.sstatic.net/YrwlE.png

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="row">
  <div class="bg-danger col-12 col-md-4 col-xl-3 p-5 mb-3">
    <div class="row">
      <div class="row">
        <div class="col d-flex justify-content-start flex-column">
          <span><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="58283d28392b3c392b3c2b393c3931393c2c37393c2b392b3c392b2b2b2b2b2b2b3c396a6b183f35393134763b3735">[email protected]</a></span>
        </div>
      </div> 
      <div class="row">
        <div class="col d-flex justify-content-start flex-column">
          <span><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7f0f1a0f1e0c1b1e0c1b0c1e1b1e161e1b0b101e1b0c1e0c1b1e0c0c0c0c0c0c0c1b1e4d4c3f18121e1613511c1012">[email protected]</a></span>
        </div>
      </div> 
    </div>
  </div>
</div>

htmlcssbootstrap-4

Answer №1

To implement the word-wrap feature in CSS, utilize the word-break: break-all property.

.break-words {word-break: break-all}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="row">
  <div class="bg-danger col-12 col-md-4 col-xl-3 p-5 mb-3">
    <div class="row">
      <div class="row">
        <div class="col d-flex justify-content-start flex-column break-words">
          <span>pepasdasdsadaiadtoadsasdasssssssda23pepasdasdsadaiadtoadsasdasssssssda23@gmail.com</span>
        </div>
      </div> 
      <div class="row">
        <div class="col d-flex justify-content-start flex-column">
          <span><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8c8ddc8d9cbdcd9cbdccbd9dcd9d1d9dcccd7d9dccbd9cbdcd9cbcbcbcbcbcbcbdcd98a8bf8dfd5d9d1d496dbd7d5">[email protected]</a></span>
        </div>
      </div> 
    </div>
  </div>
</div>

Answer №2

To enable word wrapping on the span element, consider utilizing the CSS property word-wrap: break-word;

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

What could be causing the partial failure of my CSS stylesheet in my Django application? Could it be related to retrieving data from the database?

After following various tutorials, including one on LinkedIn, I believe my Django settings are correct. However, I am facing an issue with the CSS stylesheet in my app. The styling works perfectly everywhere except for the section where I retrieve data fro ...

htmlcssdjangopostgresql

Decrease the font size of text using intervals in CSS

I'm facing a challenge where I need to decrease the font size by 10% every 2 seconds. <div class="shrink"> text </div> .shrink{ transition: 2s linear all; font-size : 20px; } Is there a way to achieve this using only CSS? ...

css

Is there a more efficient method for showcasing model objects in Thymeleaf rather than utilizing a form?

I've been exploring Spring Boot, Thymeleaf, and frontend development in general. Currently, I have a frontend table that displays a list of objects from the backend, along with a form to allow users to view properties of each item in the list. Howeve ...

javahtmlspring-bootthymeleaf

What is the best way to trim the edge of a container without causing the contents to spill over?

A request has come in from a client asking for a unique image slider that is quadrilateral in shape, but not rectangular. The slider should only occupy half of the page and should not overlap the content on the right side. An example of what is needed can ...

csshtmlinternet-explorer-8

Automatically adjusting tab heights with jQuery

Having an issue with the jQuery tabs on a school website project. Looking for some assistance with JavaScript. Check out the page here: 71.50.205.125/staugie.net/school/admin, it's my current work in progress. Created a user account with username "tes ...

javascriptjqueryhtmlcssjquery-ui

Looking for a way to create a CSS expression to select the "Select" option? I've experimented with various x paths, but I can't seem to get it to work on

<div class="row-fluid"> <table class="s-table table table-bordered table-striped table-hover"> <thead class="p-table-head"> <tbody class="p-table-body"> <tr> <td> <td> <td> <td> <td ...

cssseleniumselenium-webdriverwebdriver

Looking for a bootstrap table code that includes checkboxes and a save button, so that when the save button is clicked, it

Seeking a Bootstrap table code that includes row checkboxes. When the save button is clicked, it should return the selected checkbox rows. ...

javascriptuser-interfacebootstrap-4datatable

Adjust the size of a division based on the width of the screen using JavaScript

Is there a way to create a JavaScript function that dynamically adjusts the size of a div, image, or padding based on the screen width without using CSS? I am specifically interested in adjusting the padding of a div element. Here is a sample code snippet ...

javascripthtmlcss

The code in check.js causes a square of dots to emerge on the screen in Skype

Trying to add a Skype call button to my page has been successful, but there's one issue - a pesky white dot keeps appearing at the bottom of the footer. The script source I used is as follows: <script src="http://download.skype.com/share/skypebu ...

javascripthtmlskype

Make changes to the HTML file by directly using Jquery or JavaScript

Allow me to elaborate on my current objective. I have an HTML file that requires direct content updates. Specifically, I am working with elements sharing the 'id=test'. My goal is to dynamically update all elements with unique IDs such as ' ...

javascriptjqueryhtml

What causes the NavBar to show and hide within a specific range?

Recently, I encountered a perplexing issue with my navbar. It functions correctly except for one strange behavior that has left me baffled. Why does the menu appear when I adjust the width to 631px, but disappear at 600px? And vice versa – why does it wo ...

htmlcssangulartypescript

Creating a persistent sticky element that remains at the forefront in Electron or JavaScript development

Currently, I have a remote desktop control application built on Electron that functions as a desktop app on Mac and Windows, and as a web app on Chrome and Firefox. My next goal is to create a sticky component that remains on top at all times, regardless ...

javascripthtmlelectron

Arranging titles on the top of the page in a column format, resembling an index

Has anyone figured out how to make the title of the content stick at the top, one below the other, as the user scrolls? I've been using Bootstrap's Scrollspy, which works fine, but I need a few additional features. You can check out the codepen l ...

javascriptjqueryhtmlcssscroll

Can we combine JQuery includes with Angular Includes?

I have come across an issue while working on an application that combines both Jquery and AngularJS includes. It seems that Angular does not work properly after Jquery has included a file containing AngularJS markup. Specifically, Jquery is including the " ...

javascriptjqueryhtmlangularjs

Abundance of DOM elements - the difference between hidden and display none

When I have numerous DOM elements on my page and assign them all a display: none property, the browser continues to perform quickly (smooth scrolling and snappy page response). But if I hide the elements using visibility: hidden instead, the browser slows ...

htmlcssdom

Animation effects compatible with iOS devices are professionally crafted using CSS

I just implemented a custom hamburger menu with animation using HTML, CSS, and JavaScript on my website. The animation works perfectly on Android devices but not on iOS. Any suggestions for fixing this issue? I attempted to add the Webkit prefix to each p ...

javascripthtmlcssanimationcss-animations

Button background must be grayscale, while the text should remain unaffected

I have a variety of buttons with different background images. My goal is to apply a grayscale filter to the backgrounds by default and remove the filter on hover, without affecting the color of the button text. Currently, when I apply the grayscale filter ...

cssbuttontextbackgroundgrayscale

Getting Started with CSS Alignment - A Novice's Guide

Recently, I embarked on my journey to learn HTML and CSS with the ambition of creating a login page. Although I've successfully crafted a basic version, I'm encountering an issue where the input boxes and labels are misaligned, giving off an unpr ...

htmlcss

Steps for accessing a particular tab on a separate webpage

I am working on a home page that includes an IFrame displaying a separate HTML page. Within the embedded page, there is a link that, when clicked, should open another page in the same IFrame with a specified tab displayed. This new page contains 3 tabs, ...

htmltabs

Incorporating Popper.js into Your Vue Project with Bootstrap 4

Does anyone have experience with integrating popper.js in Vue? I've tried importing it into my main.js file, but it's not working. Here's my setup: import Vue from 'vue' import App from './App.vue' import router from &ap ...

vue.jsbootstrap-4popper.js