Tips for making modal body text reactive to different screen sizes

The text sent from JavaScript to the modal does not make the text_description element in the modal body responsive

Modal Image https://i.sstatic.net/UJEG8.png

HTML Code Snippet

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="" id="viewModal" tabindex="-1" role="dialog" aria-labelledby="viewMModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewMModalLabel">Description</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <p id="text_description">ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

htmlcssbootstrap-4

Answer №1

To achieve word break in CSS, use the following property: word-break: break-all;. Here is a sample demonstration:

.modal-body {
    word-break: break-all;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Answer №2

Simply update the overflow-wrap property to break-word within the CSS for the element with ID text_description.

#text_description {
  overflow-wrap: break-word;
}

This adjustment ensures that long words are not broken in the middle and are instead wrapped onto the next line.

#text_description {
  overflow-wrap: break-word
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="" id="viewModal" tabindex="-1" role="dialog" aria-labelledby="viewMModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewMModalLabel">Description</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <p id="text_description">ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
<div class="" id="viewModal" tabindex="-1" role="dialog" aria-labelledby="viewMModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewMModalLabel">Description</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <p id="text_description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

Alternatively, you can utilize Bootstrap's .text-truncate class to truncate lengthy text content.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class=" " id="viewModal" tabindex="-1" role="dialog" aria-labelledby="viewMModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewMModalLabel">Description</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <p id="text_description" class="text-truncate">ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

Answer №3

While the other solutions may also be effective, you have the option to include the Bootstrap class text-break in your text for similar functionality without needing to add extra CSS styles.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#viewModal">
  Launch modal
</button>
<div class="modal fade" id="viewModal" tabindex="-1" role="dialog" aria-labelledby="viewMModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewMModalLabel">Description</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <p id="text_description" class="text-break">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

Answer №4

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <section>
    <div class="container">
      <div class="row">
        <div class="col">
          <!-- Button trigger modal -->
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
            Launch demo modal
          </button>

          <!-- Modal -->
          <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body" style="overflow-wrap: break-word;">
                  ssssssssssssssssssssss.......... (Content abbreviated for brevity)
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary">Save changes</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  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>

Apply overflow-wrap: break-word; to .modal-body class

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

Enhancing Image Quality in JavaFx's Scene Builder

Hey everyone! I've been using JavaFx scene builder to create a user interface with some png images. Up to now, I've been using labels and enlarging them to display the pictures, but this solution isn't ideal because I need to create multipl ...

javacssjavafxscenebuilder

PHP line breaks are not functioning as expected

I am having trouble formatting the email with line breaks to display as: Name: Email: Message: I attempted adding \r\n but it had no effect. Then I tried including $headers .= 'Content-type: text/html; charset=utf-8' . "\r\n ...

phphtml

What is the best way to access HTML attributes within a JavaScript function when working with a dynamic element?

When a user interacts with an HTML element on my website, I aim to display the attributes of that specific element in a new browser tab. An example of such an HTML element is: <a id="d0e110" onclick="GetWordFile(this.id)" attr1="attr1_value" attr2="at ...

javascripthtmlxslt

What is the method for triggering the output of a function's value with specified parameters by clicking in an HTML

I am struggling to display a random number output below a button when it is clicked using a function. <!DOCTYPE html> <html> <body> <form> <input type="button" value="Click me" onclick="genRand()"> </form> <scri ...

javascripthtmlfunctiononclick

Looking to achieve a stretch-auto-auto column layout in Bootstrap 4 - how can this be done?

Essentially, I am looking for something similar to this: https://i.sstatic.net/ss3Ir.png Can this layout be achieved using columns instead of floats? <div class="clearfix"> <div class="float-left"><button class="rounded btn btn-outline ...

htmlcsstwitter-bootstrapbootstrap-4

Hide jquery scroll bar

I am currently working on a WordPress plugin with the Twenty Thirteen theme. My goal is to display a modal when a div is clicked, and at that time I want to hide the scrollbar on the body of the page. Despite trying the following code snippet, it doesn&ap ...

javascriptjqueryhtmlcsswordpress

Customizing the positioning of a dropdown menu to the right in WordPress

I've encountered an issue with the native dropdown menu in Wordpress. The menu is dropping elements on the left side, but I need them to appear on the right side. Below is the CSS code I'm currently using: div#navigation { float: left; p ...

csswordpressdrop-down-menu

Adjust the height of a sibling div using JavaScript with mouseover event

I need assistance with creating an audio visualizer effect where on mouseover, "this" div becomes the tallest one and the other divs adjust their heights accordingly. How can I specify the specific height for each sister div to change to? Code window ...

javascriptjqueryhtmlcss

Can the floating side of a div be switched after resizing?

Let's say I have two divs set up in the following configuration: |------------------------------| | div1 ------------------ div2 | |------------------------------| .div1{ float:left; } .div2{ float:right; } From my understanding, they w ...

htmlcssbootstrap-4

Ways to deactivate a button using CSS

I need to use Javascript to disable a link based on its id. By default, the link is invisible. I will only enable the link when the specific id value comes from the backend. HTML <li id="viewroleId" style="display: none;"> <a href="viewrole" ...

javascripthtmlcssangularjs

How can I use jQuery to submit a form that has been removed from the document?

Having a popup with a form inside, the issue arises after clicking "save" and the popup disappears. As a workaround, an attempt was made to clone it using var form = $(this).clone();, followed by calling form.submit() but unfortunately, this method did n ...

jqueryhtml

Tips for utilizing CSS to position a semi-circle in the middle of an image

Can CSS create a half circle effect on any image? I want to achieve a half circle effect in an image using CSS. Is this possible or not? ...

css

`Considering various factors to alter class pairings`

I have defined a few style classes in my stylesheet as shown below: .left-align{ /* some styles here */ } .right-align{ /* some styles here */ } .validate-error{ /* some styles here */ } Depending on the type of data, I need to align the content ei ...

htmlcssangularjsvalidationng-class

Click on the social media icon to access the link

Recently, I created a social media icon list for my website but I'm struggling to figure out how to add clickable links to them. I attempted using the "a" tag, but it's not functioning as expected: <div class="leftside"> <ul class= ...

htmlcsshyperlinkicons

Rails: Generating HTML output straight from the controller

Looking for some guidance on handling the response from an AJAX call. Here's what I'm trying to achieve: Initiate an AJAX call to my Rails application to retrieve an HTML document. In the Rails controller, access the HTML document stored on dis ...

htmlruby-on-railsajax

implementing a vertical separator in the main navigation bar

Is there a way to insert a vertical divider after each li element on the main menu? <ul class="nav navbar-nav"> <li><a href="#"><i class="fa fa-home"></i> <span class="sr-only">(current)</span></a>< ...

htmlcss

Ensure that an HTML table row remains fixed on the screen at all times

I'm looking to make a specific row in my HTML table always visible on the screen, either at the bottom if scrolled off or top. The row should scroll normally as part of the table when it's visible on the screen. How can I accomplish this using bo ...

javascripthtmlcssscroll

Adjust the DIV dimensions to fit the background image perfectly

My question involves a DIV element with a specific style applied to it. .vplayer-container .logo { position: absolute; bottom: 50px; right: 10px; background: url(../img/logo.png) no-repeat; border: 1px solid #000000; max-width: 50px; max-height: 50 ...

htmlcssbackground-image

Obtain data using a REST request from a webpage or web server

Is it possible to extract the last status value from a delivery courier's webpage by sending a tracking number request using PHP? I have found some helpful information, but I am unsure if it is possible to extract only specific values from the result ...

phphtmlrestapi

Creating lasting placeholder text with gaps between each word

Looking to create a unique text input with static content on the right and editable text on the left https://i.stack.imgur.com/K0YfM.png Any suggestions? ...

htmlcss