Bootstrap button word wrapping issue remains unsolved

I've implemented a bootstrap layout on a basic page, featuring rows with columns arranged in fullscreen. The width and height are not specified and should remain as is.

Below is my layout definition:

<div class="container-fluid">
    <div class="row">
        <div class="section col-lg">
            <ul class="list-group>

Within the ul element, there's a button structured like this:

<a type="button" class="btn btn-success list-group-item list-group-item-warning"
    href="https://www.google.at" target="_blank">
    <i class="material-icons">extension</i>
    <br>
    asdfasdfasdfasd fasdfasdfasdfasdfasdf
</a>

Unfortunately, I'm facing an issue where the text on the button overflows and doesn't wrap inside it.

https://i.sstatic.net/flIGP.jpg

I've attempted to resolve this by following the solution provided on Force a line break inside the button's text when using small screens, but it only resulted in cutting off the text instead of wrapping it to the next line.

Additionally, I experimented with overflow: hidden;, which merely hides the text before it exceeds the button's boundaries.

htmlcssbootstrap-4

Answer №1

If you want the button text to split on smaller screens, use this @media query CSS to allow multiple line breaks within the button:

CSS 

@media only screen and (max-width: 30em) {

   body .btn { white-space: normal; }

}

This image demonstrates how this CSS code applies to devices with a width as small as 232px, going beyond typical media query standards:

https://i.sstatic.net/6RNfq.png

Even at extremely narrow widths like 186px, the CSS snippet still works by splitting the text further. You can make the text even smaller using Bootstrap's <small></small> element on BS4 .btn text >>> https://getbootstrap.com/docs/4.0/content/typography/#inline-text-elements

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

To demonstrate its functionality, I've included the CSS in a Stack Overflow code snippet below. Note that this is not my original code; I found it in another question on Stack Overflow here >>> Force a line break inside the button's text when using small screens

I hope this solution helps address your concerns. 

@media only screen and (max-width: 30em) {
  body .btn { white-space: normal; }
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>


    </style>
  </head>
  
  <body>
  
  <div class="container-fluid">
<div class="row">
<div class="section col-lg">
<a type="button" class="btn btn-success list-group-item list-group-item-warning"
href="https://www.google.at" target="_blank">
<i class="material-icons">extension</i>
<br>
asdfasdfasdfasd fasdfasdfasdfasdfasdf
</a>
</div>
</div>
  </div>



<!-- javascript -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></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>
  
  </body>
</html>

Answer №2

Utilize the p tag for better formatting:

<a type="button" class="btn btn-success list-group-item list-group-item-warning"
    href="https://www.yahoo.com" target="_blank">
    <i class="material-icons">extension</i>
    <br>
    <p>This is an example of how to use the p tag in HTML.</p>
</a>

Answer №3

Consider utilizing the class = "d-inline-block text-truncate" within an anchor element

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

Steps to create full screen jQuery tabs with overflow scroll feature in the content

I am in the process of creating a responsive web design using jQuery tabs. My goal is to make one page of the website occupy the entire screen (100% height and width), have a fixed height for the div.ui-tabs-nav, and enable scrolling for the content of div ...

jqueryhtmlcssjquery-ui-tabsjquery-tabs

Bootstrap 4 navigation tabs feature with dropdown menu aligned to the right side

According to the official Bootstrap 4 documentation, incorporating dropdowns into the Nav Tabs component simply involves adding a bit of extra HTML code. Here is the code snippet provided in the documentation. I have modified the placement of the nav-item ...

bootstrap-4

One way to trigger the same modal to open when clicking on a shared class using jQuery

I need some assistance with opening a model upon clicking the same link. Currently, when I click on the link, only the backdrop briefly appears and then the page reloads. Any help would be greatly appreciated. Thank you in advance. Below is the code snipp ...

jqueryhtmltwitter-bootstrap

What is the best way to create a dynamic JavaScript counter, like one that counts the world's population

Can someone guide me on creating a real-time JavaScript count-up feature that doesn't reset when the page reloads? Any tips or examples similar to would be much appreciated. Thank you! ...

javascripthtmlcss

Tips for overriding ng-disable in AngularJSUnleashing the

This is a comment box using AngularJS: <tr> <td colspan="5"><br/>Comments* <div><textarea class="form-control" rows="3" cols="60" ng-model="final_data.drc_scope" placeholder="Add comments here" ng-disabled="is_team==0 || isDis ...

javascripthtmlangularjstwitter-bootstrap

Display just a portion of an image with a "hover and move" effect

I am in the process of developing a website with a unique functionality. Take a look at this screenshot. The concept involves displaying only a section of a large image that can be moved by hovering the mouse over it (moving the mouse to the left will ...

jqueryhtmlcssimagehover

The field 'post_id' cannot be identified. Available options include: comment, id, name, post_list

An error occurred while trying to process the request for post number 1. This error is related to a field resolution issue with the keyword 'post_id'. Available fields include: comment, id, name, post_list. The method used was GET and the URL req ...

htmldjango

Looking to establish a minimum height for a webpage

I am working on creating a webpage with three distinct sections: A fixed height header A fluid main section A fixed height footer My goal is to ensure that the page has a minimum height so that the bottom of the footer aligns with the bottom of the wind ...

javascripthtmlcss

The functionality of a Bootstrap popover with a form in data-content is fully operational within Django versions 1.11 and 2.0; however, it appears to encounter issues when utilized in

Below is the code that functions correctly in Django 1.11 and after upgrading also works in Django 2.0. However, it encounters issues in higher versions of Django starting from 2.1 up to 3.1.4. <button type="button" class="b ...

djangobootstrap-4popoverdjango-2.2

Problem arises when attempting to display a div after clicking on a hyperlink

I'm encountering an issue with displaying a div after clicking on a link. Upon clicking one of the links within the initial div, a new div is supposed to appear below it. All tests conducted in jsfiddle have shown successful results, but upon transf ...

jqueryhtmlcsstoggle

I'm struggling to adjust the height of a div based on whether a list item within it contains a nested unordered

I have been working on a horizontal menu that is functioning well for me. However, according to the design requirements, I need to adjust the height of <div id="nav-subMenu"></div> if the main/parent menu li does not have any submenus or ul. Th ...

javascriptjquerycss

How to retrieve the class of a dynamic div by clicking on a different div using jQuery?

I am trying to retrieve the class of a dynamic div when clicking on another div with the class name "div.secondclass". Below is my code snippet: $(document).ready(function() { $("div.secondclass").click(function () { firstclass=$('#firsti ...

javascriptjqueryhtml

jQuery registers the enter event, but does not proceed to trigger the enter action

Hey there, I've been experimenting with jQuery to capture the enter event. Something peculiar is happening though - after pressing enter in the text area, an alert pops up but the text gets entered only after that. Despite trying various solutions, I ...

javascriptjqueryhtml

Struggling with implementing CSS in React even after elevating specificity levels

I am struggling with a piece of code in my component that goes like this: return ( <div className="Home" id="Home"> <Customnav color="" height="80px" padding="5vh"/> <div className= ...

cssreactjsstyling

CSS Interactive Design Breakpoints

Do my Break points at 768, 480, and 225 provide enough support for a responsive design, or should I consider adding more? 768 + | Computer 480 - 768 | Tablet 225 - 480 | Smartphone 225 < | Phone / Mini Browser ...

htmlcss

The browser does not support the display of Spanish special characters

I am working on a website and need to incorporate support for the Spanish language. I have prepared an XML file with both English and Spanish text. The XML file is being read based on the user's selection of language from a dropdown menu. Everything s ...

htmlxmlutf-8metaiso-8859-1

Exploring the Contents of an ASP ListView

I am attempting to align the odd-numbered items to the left using float:left, and the even-numbered items to the right using float:right. However, it seems like every item is being considered as odd AND element 1 regardless of the actual order in the list. ...

c#htmlasp.netcss

Even after setting the handler to return false, Angular continues to submit the form

In the following scenario, I have encountered an issue: Here is the HTML template snippet: <form [action]='endpoint' method="post" target="my_iframe" #confirmForm (ngSubmit)="submitConfirmation()"> <button type="submit" (click)="conf ...

javascripthtmlangular

Is there a way for me to retrieve the icons through a content query?

Currently, I am working on customizing a background slider. However, in the CSS file: span.cbp-binext:before { content: "\e000";} The issue I am facing is that I am only getting squares as icons. Is there a way for me to replace these squares with a ...

javascriptcsshtml

What is the best way to resize images to fit in a 200 pixel square box using CSS?

I have a collection of images that all fit within a 400px × 400px box, with one dimension being 400px and the other smaller. I want to resize these images using CSS or jQuery/JavaScript if necessary, to fit into a 200px by 200px box. The goal is to have t ...

javascriptcssimagebounding-box