Having issues with the Word Wrap function not properly breaking words on my Accordion widget

I'm having an issue with my accordion headings not starting on a new line, even though I've applied 

word-wrap: break-word !important;
. The text is currently overflowing the card in a strange way, which is causing problems for mobile devices. I would appreciate some insight from the SO community to help me identify where I might be going wrong.

Thanks

#accordion-style-1 h1,
#accordion-style-1 a {
    color: #0E112B;
    word-wrap: break-word !important;
}

#accordion-style-1 h5 .btn-link {
    font-weight: 400;
    color: #0E112B;
    background-color: transparent;
    text-decoration: none !important;
    font-size: 18px;
    word-wrap: break-word !important;
    font-weight: bold;
    padding-left: 25px;
    width:100% !important;
}

#accordion-style-1 .card-body {
    border-top: 2px solid #0E112B;
display:block;
}

#accordion-style-1 .card-header .btn.collapsed .fa.main {
    display: none;
}

#accordion-style-1 .card-header .btn .fa.main {
    background: #0E112B;
    padding: 13px 11px;
    color: #ffffff;
    width: 35px;
    height: 41px;
    position: absolute;
    left: -1px;
    top: 10px;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    display: block;
}
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css"
        integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ"
        crossorigin="anonymous">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"</script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'
        integrity='sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q
        crossorigin='anonymous</script>

    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js'
        integrity='sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl
        crossorigin='anonymous'></script>
        
        

<div class='container'>
  <div class='row justify-content-between'>
    <div class='col-md-6 my-auto col-12'>
      <div class='col-12 mx-auto' id='accordion-style-1'>
        <div class='accordion' id='accordionExample'>
          <div class='card'>
            <div class='card-header' id='headingOne'>
              <h5 class='mb-0'>
                <button class='btn btn-link btn-block text-left' type='button' data-toggle='collapse' data-target='#collapseOne' aria-expanded='true' aria-controls='collapseOne'>
  <i class='fa fa-calendar main'></i><i class='fas fa-angle-double-right mr-3'></i>How do I send an send reminders through pigs flying??
</button>
              </h5>
            </div>

            <div id="collapseOne" class="collapse show fade" aria-labelledby="headingOne" data-parent="#accordionExample">
              <div class="card-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
                on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
                raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS
              </div>
            </div>
          </div>
             ...other cards omitted for brevity...
       
          
        
        </div>
      </div>
    </div>
 
  </div>
</div>

cssbootstrap-4

Answer №1

I believe this solution could be of assistance

.toggle .panel-heading .btn-box{
overflow-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

Neither BigText nor FitText is effective

Here is a sample HTML snippet: <div id="bigtext" style="width: 300px"> <div>The mysterious</div> <div>BIGTEXT</div> <div>feature exclusively</div> <div>encapsulated on screen</div> < ...

javascriptjqueryhtmlcssfonts

Ways to boost text size in Bootstrap 4

By default in Bootstrap 4, font-size is set to use em or rem for fonts. What is the best way to adjust the font-size for all viewport sizes? Currently, all elements appear too small. ...

htmlcsstwitter-bootstrapbootstrap-4

Experiencing issues with a malfunctioning Chrome extension? The CaptureVisibleTab feature seems to be failing when using

Whenever I try to use the captureVisibleTab function on a page where I have a div with preserve3d in CSS3, all I see is a blank page. How can I solve this issue? Here is my simple code for capturing the browser screen: chrome.browserAction.onClicked.addL ...

google-chromecssgoogle-chrome-extension

Inspect Element - base tag href URL for inline CSS allocation

When utilizing the <base> tag in HTML along with the <style> tag on Microsoft's Edge Browser, I encounter a peculiar issue. Here is a very basic example: <!DOCTYPE html> <html lang="en"> <head> <title>Edge de ...

htmlcssmicrosoft-edgedeveloper-tools

Issue with JQuery event handlers becoming unresponsive upon resizing the window

JSBin link: http://jsbin.com/4QLDC/6 Here is the JS code snippet that I have written: var toggleContent = function (event) { $(event.target).siblings().toggle(); }; var showOrHidePanels = function () { var windowHeight = $(window).height(); v ...

javascriptjqueryhtmlcss

Web Dialogue Dimensions: Adjusting the MDC-Web Dialog Width

When designing a dialog following Material Design guidelines, one issue that often arises is how to handle the width of the dialog on larger viewports such as tablets and desktops. Some sources suggest using increments of 56px for dialog width, but it&apos ...

htmlcssmaterial-designmaterial-design-lite

issues with padding in the main content section

When I try to search for something that isn't on the page, a strange margin or padding issue occurs. I have thoroughly reviewed the code but can't seem to pinpoint the problem. The unwanted 30pxish margin after the footer should not be present wi ...

htmlcss

The issue with the Material UI Drawer component is that it is casting a shadow even when

Having some trouble with the Material UI Drawer component. Whenever I try to display it on my webpage, it automatically focuses on the inner div, adding a shadow or border if the focus is anywhere else. Does anyone know why this shadow appears and how to r ...

htmlcssreactjsmaterial-uiz-index

Tips for customizing the color of mat-select placeholder text?

I've been attempting to modify the color of a mat-select placeholder. It functions properly when using 'background-color' but not when using 'color'. Below is my CSS code: /deep/ .mat-select-placeholder { color: red; } .mat-s ...

cssangularangular-material-5

Issues with dropdown menus in the navbar are causing unexpected behavior

I'm having trouble with the dropdown menus on my website. Despite clicking on them, they refuse to drop down and display their content. I've gone through various resources, including this site and bootstrap documentation, but I can't seem to ...

twitter-bootstrapdrop-down-menunavigationbootstrap-4

Show another div once you've scrolled beyond the first

Instead of following tutorials that make a div appear after scrolling down a set number of pixels, I am looking to achieve something different. I want a div to appear when the user scrolls past another div, and then disappear again when they scroll back up ...

javascriptjqueryhtmlcssscroll

When the height of the navigation bar is adjusted, the content on the page is shifted

I am facing a challenge that I need help with. I have a button that, when clicked, should expand the navigation bar to cover the entire screen without pushing down the content below it. However, despite setting the height of the navigation bar to 100vh, th ...

javascripthtmlcss

Trouble accessing HTML file in web browser

I just finished creating a basic webpage called HelloWorld.html using HTML, JavaScript, and CSS. It runs smoothly when I open it from Eclipse IDE and view it through a browser. The functionality of the page is that it contains 5 buttons, each revealing th ...

javascriptcsshtml

Angular html components must always be enclosed with closing tags for proper rendering

Angular is giving me an error message about incorrect closing tags, but I have checked and all the tags seem correct with one open tag and one close tag for each. Below is my code: <div class="container-fluid"> <h6 class=" ...

htmlangularbootstrap-4

Using Autoprefixer in ANT Build Process

My project will be incorporating Bootstrap 4 with a customized theme. The recommended tools for this are sass and Autoprefixer, however, I am lacking node or maven in my setup. Our build process utilizes Ant, which does have a Ruby plugin available for c ...

antbootstrap-4autoprefixer

Spin the text inside an <li> element generated by JavaScript

I am currently working on a unique script designed to create a custom number of slices for a circle. The items in the circle are being displayed as shown in this generated circle image. This is the Javascript code I have been using: for () { men ...

javascripthtmlcss

The html template is not receiving a success response from Django

After creating a contact form, I noticed that upon processing, the data is being returned in the error div tag rather than the success div tag. from django.shortcuts import render, redirect from django.http import HttpResponse from django.core.mail import ...

pythondjangobootstrap-4

Steps for activating flex to true in Bootstrap 4 using SCSS

I have successfully installed the latest version of Bootstrap using bower. I am utilizing gulp tasks to convert it into CSS. Within my style.scss file, I have included: @import "bootstrap"; @import "font-awesome"; Everything is functioning properly at th ...

twitter-bootstrapsassflexboxbootstrap-4twitter-bootstrap-4

Designing a website's layout with HTML and CSS

I am having trouble developing a concept depicted in the image below. Here is what I have accomplished so far: https://jsfiddle.net/o0zmtr3q/2/. I am struggling to make each box unique, especially with the layout where the text is positioned differently in ...

htmlcssbootstrap-4

Aligning the column to the right to ensure the text is centered horizontally on the screen

<div className={css.title} > <div className={css.row}> <div className={css.columnLeft}> <div className={css.header}>Images</div> </div> <div className={css.col ...

cssreactjsflexbox