Tips for creating a responsive div where entire words wrap to the next line

My content is overflowing the div and refusing to wrap onto the next line. I don't want to resort to using word-break because I want the entire words to be displayed. Specifically, the phrase "medieval, renaissance and" is causing overflow at md width within Bootstrap columns.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
    <div class="row">
        <div class="col-sm-4">
            And so it was indeed: she was now only ten inches high, and her face early modern art brightened up at the medieval, renaissance and and she was now the right size for going through the little door into that lovely garden.
        </div>

        <div class="col-sm-4">
            You will openly cultural haberdashery from across the world to reassess a calls of judgement values granted to medieval, renaissance and early fashion art that have often been taken as renegades.
        </div>

        <div class="col-sm-4 ">
            After a time she heard a little pattering of feet in the distance, and she hastily dried her eyes to see what was coming. It was the White Rabbit returning, splendidly dressed.
        </div>
    </div>
</div>

htmlcssbootstrap-4

Answer №1

To achieve this, utilize the Text | Utilities / Bootstrap classes available in Bootstrap 4: Text | Utilities / Bootstrap

Simply include the class: .text-break within your div element.

Answer №2

It seems like there could be a hidden character causing this issue, as removing the space before and after the word renaissance resolved the problem.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
    <div class="row">
        <div class="col-sm-4">
            Indeed, she shrunk down to ten inches in height, her expression brightening at the mention of medieval, renaissance art, fitting perfectly to pass through the small door into the enchanting garden.
        </div>

        <div class="col-sm-4">
            Across the world, diverse cultural influences converge to reconsider the values attributed to medieval, renaissance, and early fashion art that have often been viewed as rebellious.
        </div>

        <div class="col-sm-4 ">
            Suddenly, the sound of footsteps echoed in the distance, prompting her to quickly wipe away her tears and see who was approaching. It was the elegantly dressed White Rabbit returning.
        </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

Trouble accessing data with AJAX

I am trying to retrieve content from a web page and display it on my own webpage using AJAX. However, I keep encountering an "Access denied" error before the specified page is fetched. It's important to note that the target page does not require any l ...

javascripthtmlajax

Identify the occurrence of isolated "<" or ">" characters in a string that includes HTML elements

As an example, consider a string similar to: "This is a <b> Sample </b> string with characters < 100" The user has the ability to include HTML tags such as <b>, <div>, and more. These tags are permitted in this scenario. The ma ...

html

Exploring the impact of JavaScript tags on website performance in accordance with W3

While researching website optimization strategies today, I came across an article discussing the benefits of moving JavaScript scripts to the bottom of the HTML page. I am curious if this approach aligns with W3C's recommendations since traditionally ...

javascripthtmloptimizationtagsw3c

Excess background spills beyond the width of the window

Looking to create a design similar to the following: A main container with 'n' child elements that may extend beyond the width of the window, causing the page to scroll horizontally instead of wrapping to the next line. This main container ...

htmlcssflexboxoverflow

What is the best way to select the element where a user has clicked using JavaScript?

Referencing a previous question on Stack Overflow, the goal is to track user clicks in a Firefox browser using JavaScript. The provided JavaScript code almost achieves this: var DocElements = document.getElementsByTagName('*');for(var i = 0; i & ...

javascripthtmlfirefoxselenium

Is there a way to smoothly incorporate a new animation into a page, while ensuring that existing elements adjust to make room for it?

I am looking to smoothly fade and move a hidden element (display:none) within the page, shifting other elements to animate into their new positions as necessary. When I reveal the hidden element by changing it to "display:initial," it should seamlessly a ...

htmlcss

Display specific content according to the hash in the URL

I have a website with a page (/categories.html) that contains around 50 p elements: <p id='BCI'>Blue_colored_items</p> <p id='RCI'>Red_colored_items</p> ... What I want is for the page to only display: Blue_co ...

javascriptjqueryhtmlcsshash

Is there a way to adjust the spacing between cards in Bootstrap?

I am attempting to replicate the layout shown in the attached picture. How can I adjust this property? Expected output: I would like the elements to be closer together and centered on the page, but I am struggling to achieve this. I have tried adjusting ...

htmlcssbootstrap-5

Ensure that clicking on various links will result in them opening in a new pop-up window consistently

I am facing an issue with my HTML page where I have Four Links that are supposed to open in separate new windows, each displaying unique content. For instance: Link1 should open in Window 1, Link2 in Window 2, and so on... The problem I'm encounter ...

javascripthtmlbrowser

Updating an image source using JavaScript without relying on a default image source specified in the HTML code

Struggling to change the image source path using JavaScript? Want to change the page color randomly after each load? I created SVGs in different color types - blue, red, yellow... but can't get it to work. The path seems correct when tested normally i ...

javascripthtmljqueryimagebackend

Adding classes to forms in Laravel 4 is a simple yet important step in custom

It may be a straightforward solution, but I haven't been able to locate any documentation on this topic. Recently, I created a form using Laravel 4 which is functioning as expected. However, the next step is to add some styling. How can I incorporate ...

csslaravellaravel-4laravel-blade

Ensuring Consistent Visual Harmony Across Linked Elements

As part of my project developing an iPad app with PhoneGap and jQuery Mobile, I am looking to incorporate a preview pane within a carousel. This preview pane should display smaller versions of the other panes scaled inside it. The panes are dynamic and upd ...

javascriptjqueryhtmlcss

Combining Data from Header to Body using HTML5 and JavaScript

I am struggling to figure out how to transfer variables declared in the script from the header of my code to the body. Specifically, I want to capture the user input in the script and replace a placeholder in the body. Here is an example of what I am tryin ...

javascripthtmlhead

expanding the input and duplicating the outcomes

I'm attempting to clone and add values to results in my project. Here's the link to what I have so far: http://jsfiddle.net/QNP3r/175/ Currently, it is functioning adequately with a table element. However, I'd like to make it work with a di ...

javascriptjqueryhtmlappend

The data-src tags are functioning properly in the index.html file, but they are not working correctly in angular

I'm still learning about Angular and JavaScript, so please bear with me if my questions seem silly. I've been trying to add a theme to my Angular project. When I include the entire code in index.html, everything works fine. However, when I move ...

javascriptjqueryhtmlangularjs

The dimensions of a Tumblr video

Hi there! I have a question regarding my tumblr theme. The space allocated for video posts on the home page is perfect, but when I click on the permalink, it becomes too small. I don't want to change the size of the video on the home page, so is there ...

htmltumblr

Unable to accept the link ID in the modal

Presently, I am facing an issue with a modal that links a product with a customer and involves product discount calculations. The customer is automatically selected using the modal id, and the product is chosen through select options with a while loop. T ...

javascriptphphtmlmysql

In Visual Studio Code, beautification feature splits HTML attributes onto separate lines, improving readability and code organization. Unfortunately, the print width setting does not apply

I have done extensive research and tried numerous solutions, When using Angular and formatting HTML with Prettier, it appears quite messy as it wraps each attribute to a new line, for example: <button pButton class="btn" ...

javascripthtmlangularframeworksprettier

upgrading the process of refreshing webpage

I am currently working on a basic chat application using PHP. The messages are being inserted into the database using AJAX, and the page is being refreshed every 5 seconds to display any new incoming messages. However, this method of refreshing the page co ...

phphtmlajax

Rearrange the order of divs dynamically to prevent wrapping/overflow, no need for media queries

Can someone help me with this issue? I am trying to create a navigation bar with centered menus/links, a logo on the left, and call-to-action buttons and icons on the right. If the content overflows or wraps, I want the center column to move to the next l ...

htmlcssflexbox