Tips for causing text to wrap to a new line when reaching the end of a div element

I am struggling with keeping a text inside a div from overflowing when it reaches the border of the div. I have tried various CSS properties like "word-break" and overflow, but haven't been able to find a solution.

<div class="col-lg-3">
            <div>  
                <h2>
                    <a >
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </a>
                </h2>
            </div>
        </div>

I need the text inside the specified tags to continue on a new line without overflowing. Any help would be appreciated!

Thank you!

htmlcsstextbootstrap-4

Answer №1

If you want to achieve this, you have the option of using either overflow-wrap: break-word; or word-wrap: break-word;.

Here is a demonstration:

h2 {
  overflow-wrap: break-word;
}
<div>  
          <h2>
               <a >
                 long text that overflow ....................................................................................................................................................................................................................................................................................................
               </a>
          </h2>
   </div>

Answer №2

try using this CSS property: overflow-wrap: break-word

<div class="col-lg-3">
    <div>  
          <h2 style="overflow-wrap: break-word">
               <a >
                 a long text that exceeds boundaries and needs to be wrapped properly ...............................................
               </a>
          </h2>
   </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

Creating a Dynamic Canvas Rendered to Fit Image Dimensions

I'm struggling with a piece of code that creates an SVG and then displays it on a canvas. Here is the Jsbin Link for reference: https://jsbin.com/lehajubihu/1/edit?html,output <!DOCTYPE html> <html> <head> <meta charset=&qu ...

javascripthtmlcsssvghtml5-canvas

Padding for the initial element in a carousel display

I am currently working on implementing owl carousel with stage padding. My goal is to use the carousel with loop:false, and have the first item displayed without left padding, while maintaining consistent padding for both items on the left and right after ...

javascriptjqueryhtmlcss

I've noticed that tailwindcss is causing issues with some of the styles in my angular project

Recently, I integrated tailwindcss 2.0.4 into my angular 11.2.6 project. After completing the installation and adding necessary imports, the appearance of the page had changed. Take this button for instance: https://i.sstatic.net/vvYVN.png Prior to int ...

cssangulartailwind-css

PHP and special characters from other languages

Struggling with writing non-English characters to a file (.txt) using PHP. Here's the code snippet: $str = "â€êþÿûîœøîô‘ë’ðüïlæ߀¿×÷¡ï"; $str = htmlentities($str, ENT_QUOTES, mb_detect_encoding($str)); $str = htmlspecialc ...

phphtmlfileencodingentities

Achieve full height in Grid component of material UI by eliminating margins

In this codesandbox example, I have successfully set the grid container height to full using 100vh. However, there is an issue with a margin of 8px being added by the user agent to the body element, and I'm struggling to find a solution to remove it. ...

cssresponsive-designmaterial-uigridresponsive

Is there a way to extract the properties of a CSS class from a stylesheet and convert them into a hash using JavaScript or jQuery?

I am exploring a way to extract key value pairs from a CSS stylesheet related to a specific class or id into a JavaScript object for data accessibility. It is important to mention that I do not intend to apply this class directly to any DOM elements. In ...

javascriptjquerycssstylesheet

How to make browsers refresh cached images

.button { background: url(../Images/button.png); } Issue: To improve performance, static content on the website is cached with expiration headers. However, when an image changes, users must manually refresh their browser cache (Ctrl+F5 in IE). ...

csscaching

What seems to be the issue with Collapse.js in Bootstrap 3.3.4 on this page?

I am currently utilizing Bootstrap version 3.3.4. All of my resources are linked relatively and the HTML file is in the correct location for access. I am creating a 'Learn More' button that should display a collapsed unordered list either above ...

javascripthtmlcsstwitter-bootstrap

Version 1.0 and higher of Ionic do not display the side menu when using tabs

I have developed an app using Ionic that includes a side menu with tabs feature. The side menu displays correctly when using Ionic version 0.9.27, but it does not show up when the version is 1.0 or higher. What could be causing this issue? HTML Layout & ...

javascripthtmlangularjsionic-framework

Exploring the art of styling in Angular6

I am looking to change the text color when a specific ID is clicked <nav class="navbar "> <ul class="navbar-nav"> <li *ngFor="let item of items"> <a class="nav-link" >{{item.title}}</a> ...

cssangularhtml

What could be the reason for the presence of three pixels of white space below this particular table

My table is supposed to have a fixed height of 146px, but there seems to be an extra row of three pixels at the bottom. I've tried various methods to remove any unwanted spacing or padding, but nothing has worked so far. The only solution I found was ...

htmlcss

Why does HTML validation matter after the webpage has finished loading?

After coming across an article recommending a workaround for a method that isn't considered strictly valid (using target="_blank") by using JavaScript to apply the rules after the page has loaded, I began contemplating if this approach is ethical. It ...

htmlw3c-validation

I'm noticing that the top border for my span is smaller than the bottom one. What could

I am struggling to create an arrangement of three triangles in a line, with the first and third pointing up and the middle one pointing down. The upper triangle seems to be too small - any ideas on how to adjust this? Is there another way to achieve this ...

htmlcss

Although the Flexbox is configured with 0 gap and margin, there remains a slight space between rows

I am currently attempting to utilize a flexbox in order to display several 600x300 images, however, I am encountering an unexpected small gap between the rows despite specifying a 0 gap and margin. Here is a screenshot for reference: .gallery { display: ...

htmlcss

Image not appearing on basic HTML website

This particular issue has left me completely puzzled. After removing all the unnecessary elements from a problematic website, I am now left with an extremely basic and minimalistic site: <!DOCTYPE html> <html lang="en"> ...

htmlimagemarkup

Issue with jQuery 'on' event not triggering following 'load' event

I am facing an issue on a page where similar events occur but when new content is loaded halfway through, most of the jQuery functionalities stop working. The scenario involves answering questions in a 'game' format using AJAX calls. Once all que ...

javascriptphpjqueryhtmlajax

Experiencing a problem with inline JavaScript onclick

I recently came across a fantastic pure javascript code for a smooth scrolling function, but I'm struggling with integrating it into an inline onclick function. My understanding of javascript is quite limited and I could really use some help... <d ...

javascripthtmlonclick

Link clicking does not trigger URL routing properly

I've been tasked with updating our web application, and I'm facing a challenge that I need help with. My boss wants users to be able to click on a link in an email and have the internal company web app directly navigate to a specific page indicat ...

javascriptjqueryhtml

Embed full content in iframe using bootstrap 4

Embedding an iframe of an appointment scheduling frontend on my page has been a challenge. While the width is correct, the height of the frame is too small. Despite attempting various CSS modifications, I have not been able to achieve the desired result. I ...

javascriptcssbootstrap-4

Adapting CSS styles according to the height of the viewport

Goldman Sachs has an interesting webpage located here. One feature that caught my eye is the header that appears as you scroll down, with squares changing from white to blue based on the section of the page. I'm curious about how they achieved this ef ...

javascripthtmlcss