Text above the accordion header

I am currently utilizing an accordion component from the Bootstrap 4 library and it is functioning properly. However, I have encountered an issue when the header contains a very long title as shown below:

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque debitis aliquid numquam iure saepe eum, unde hic eligendi quisquam, neque dolorem officia magnam. Aut recusandae ipsam doloribus, cumque alias eum.
        </button>
      </h5>
    </div>

    ...

</div>

This causes the text to extend beyond the container boundary.

https://i.sstatic.net/CVexd.png

Is there a way to break the text into a new line?

I have created a trimmed version of the example on JSFiddle

csstwitter-bootstrapbootstrap-4

Answer №1

Include the following code in your CSS:

.card button{
  white-space:normal;
}

This issue is occurring because the button style currently has white-space:nowrap

To resolve this, you must add the above CSS to override it

Visit the JSFiddle here

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

The background of the webpage section is being cropped on mobile devices

Currently, I am delving into the creation of a website completely from scratch to serve as an online CV for networking and job/school applications. My journey with HTML and CSS is relatively fresh, having started only about 5 months ago. Overall, things ha ...

htmlcssmobile

Adjust the width of the unordered list to match the width of its widest child element

I'm encountering a minor issue with displaying a ul element as I am just starting to learn CSS. My goal is to set the width of my ul to match the widest listitem it contains. Below is the HTML code I have used: <div id="sidebar"> <ul i ...

jqueryhtmlcss

The concept of Theme.breakpoints does not exist in MUI React, there is

I keep running into the same error where theme.breakpoints is undefined when I try to use theme.breakpoints.up in my code. The versions of the dependencies I am currently using are: "@emotion/react": "^11.9.0", "@emotion/styled&quo ...

javascriptcssreactjsreduxmaterial-ui

How can an external style sheet be inserted into an iframe?

My website features an editor on one side and an iframe on the other. Currently, anytime HTML code is entered into the editor and a keyup event occurs, the iframe updates automatically. I am looking to add default styling to the code entered in the editor ...

javascripthtmlcssiframe

What causes the top and left border to appear as separate lines instead of a single line?

div { border: 1px solid red; } .one { height: 20px; width: 20px; } .two { height: 30px; width: 30px; } <div class="one"> <div class="two"> </div> </div> Within the structure of a DOM tree, the .two div is classified a ...

htmlcss

Tips for arranging images in a horizontal layout using FlatList in React Native

Is there a way to display feed images horizontally instead of vertically in FlatList? I've tried wrapping the images in a view with flex-direction set to row, as well as adding horizontal={true} to the FlatList, but nothing seems to work. Any suggesti ...

javascriptcssreactjsreact-native

"Divs of the same type automatically adjust size to fit within the

I am currently exploring the possibility of creating a versatile component that can be customized based on the needs of its parent element, whether through bootstrap or traditional flexbox / CSS grid. I want to determine the level of reusability this compo ...

htmlcssbootstrap-4

How can I customize the dropdown list arrow to match my own design?

Is there a simple way to substitute the standard arrow in the dropdown menu with a custom arrow image? ...

htmlcssdrop-down-menustyling

What is the best way to apply a top padding to a background image using CSS?

I attempted to adjust the top padding using various pixel values in the style, but the image padding relative to the webpage remained unchanged. For example: padding-top: 5px; Here is part of my code snippet: <div class="row pb-5 mt-4" style ...

htmlcssbootstrap-4

Get rid of empty spaces in gridstack js

My latest project involves using gridstack js In the image displayed, I have highlighted the excess white space (in blue) that needs to be removed. Take a look at this visual: https://i.sstatic.net/Qgt62.jpg Any suggestions on how to eliminate this ...

javascriptjqueryhtmlcssgridstack

Adjusting content within a div using a loop with a pause interval

I am working on a project where I need to manipulate the content of a div. Here is the initial code snippet: <div class="mytext">first</div> My goal is to dynamically change this text from 'first' to 'second' after 5 s ...

jqueryhtmlcss

Unexpected behavior in Bootstrap dropdown menus

Take a look at this link: . I have noticed that there are two dropdown sections in the navigation. When hovering over the About section, it drops down as expected. However, when trying to access the Insurance section, it requires a click to drop down. I a ...

twitter-bootstrapdropdownbootstrap-5

Use CSS to style elements that do not coincide with the specified data attribute

I'm currently working on developing a filter system. The goal is that when a user clicks on a button, the ID of that specific button will be captured and then display:none; will be applied to all elements that do not have a matching data attribute pr ...

jquerycsscustom-data-attribute

Displaying an element to appear over all client applications when hovering

Currently, I have an application that highlights specific areas when hovered over or clicked. While it functions properly, I would like the hover and click effects to be visible on every client, each with an identical overlay setup. I realize my method may ...

htmlcssvue.jsclient

What is the formula for determining the REAL innerWidth and innerHeight?

I am currently working on a responsive website using Bootstrap and I am looking to create an element that perfectly fits the screen size. When I set the height/width to 100%, the browser includes the toolbar, other tabs, and the Windows taskbar in the cal ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the process for designing a dropdown box that showcases text details?

I am in the process of building an FAQ page and I am looking to incorporate a dropdown menu that lists all the frequently asked questions. When a user clicks on a question, I want the corresponding answer to be displayed without redirecting to a new page. ...

phpjqueryhtmlcssajax

Build a custom form for the purpose of exporting an HTML file

I am in search of a way to provide my users with various "feature" choices that will assist them in creating an HTML file for an email. I already have the code ready for each feature, but I want users to be able to select a feature (such as Hero Image Head ...

javascriptcsshtmlhtml-email

Personalizing the dimensions of audio.js

I recently integrated the audio.js plugin into my website. I've added the necessary code to the header.php file located in the includes folder. <script src="audio/audiojs/audio.min.js"></script> While the player appears correctly on othe ...

javascriptcssaudio

What is the best way to adjust column sizes, setting one with a minimum width while allowing the other to expand to accommodate its content?

In the process of creating a user interface, I have included clickable cards that reveal a detailed panel when clicked. The detail panel is set to a minimum width of 900px and should adjust to the remaining space between the cards and itself. The column ...

htmlcssflexbox

Having trouble loading a CSS file in CodeIgniter?

I've added a link to my header.php and despite trying various solutions from stackoverflow, it still isn't working for me. Can someone please help? Thank you in advance :) Here's my folder structure: Main Folder: ci_attl - application ...

csshyperlink