Bootstrap Tables Overflowing with Long Unspaced Text

Bootstrap tables overflowing with long unspaced text

.the-table {
table-layout: fixed;
word-wrap: break-word;
}

Deprecated (i.e. word-wrap)

Add the following styles to your <table>

.the-table {
table-layout: fixed;
over-flow: break-word;
}

Then you can adjust your layout via-CSS as you wish.

bootstrap responsive table content wrapping

I ran across the same issue you did but the above answers did not solve my issue. The only way I was able to resolve it - was to make a class and use specific widths to trigger the wrapping for my specific use case. As an example, I provided a snippet below - but I found you will need to adjust it for the table in question - since I typically use multiple colspans depending on the layout. The reasoning I believe Bootstrap is failing - is because it removes the wrapping constraints to get a full table for the scrollbars. THe colspan must be tripping it up.

<style>
@media (max-width: 768px) { /* use the max to specify at each container level */
.specifictd {
width:360px; /* adjust to desired wrapping */
display:table;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
}

I hope this helps

How do i make two or more row long tables fit inline bootstrap 4?

Something like this?

.scroll {  height: 300px;  overflow-y:scroll;
}
<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">
<body> <div id="Customers" class=" jumbotron tabcontent bg-light"> <h3>CUSTOMERS</h3> <div class="row"> <div class="col col-md-8 scroll"> <table id="dtHorizontalVerticalExample" class="table table-striped table-bordered table-sm " cellspacing="0" max-width="60%"> <thead> <tr> <th>First name</th> <th>Last name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> <th>Extn.</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td>Tiger</td> <td>Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> <td>5421</td> <td>t.nixon@datatables.net</td> </tr> <tr> <td>Garrett</td> <td>Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> <td>8422</td> <td>g.winters@datatables.net</td> </tr> <tr> <td>Ashton</td> <td>Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> <td>1562</td> <td>a.cox@datatables.net</td> </tr>
<tr> <td>Cedric</td> <td>Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> <td>6224</td> <td>c.kelly@datatables.net</td> </tr> <tr> <td>Airi</td> <td>Satou</td> <td>Accountant</td> <td>Tokyo</td> <td>33</td> <td>2008/11/28</td> <td>$162,700</td> <td>5407</td> <td>a.satou@datatables.net</td> </tr> <tr> <td>Brielle</td> <td>Williamson</td> <td>Integration Specialist</td> <td>New York</td> <td>61</td> <td>2012/12/02</td> <td>$372,000</td> <td>4804</td> <td>b.williamson@datatables.net</td> </tr> </tbody> </table> </div>
<div class=" col col-md-4 scroll"> <table id="dtHorizontalVerticalExample" class="table table-striped table-bordered table-sm " cellspacing="0" max-width="40%"> <thead> <tr> <th>First name</th> <th>Last name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> <th>Extn.</th> <th>E-mail</th> </tr> </thead> <tbody> <tr> <td>Tiger</td> <td>Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> <td>5421</td> <td>t.nixon@datatables.net</td> </tr> <tr> <td>Garrett</td> <td>Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> <td>8422</td> <td>g.winters@datatables.net</td> </tr> <tr> <td>Ashton</td> <td>Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> <td>1562</td> <td>a.cox@datatables.net</td> </tr> <tr> <td>Cedric</td> <td>Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> <td>6224</td> <td>c.kelly@datatables.net</td> </tr> <tr> <td>Airi</td> <td>Satou</td> <td>Accountant</td> <td>Tokyo</td> <td>33</td> <td>2008/11/28</td> <td>$162,700</td> <td>5407</td> <td>a.satou@datatables.net</td> </tr> <tr> <td>Brielle</td> <td>Williamson</td> <td>Integration Specialist</td> <td>New York</td> <td>61</td> <td>2012/12/02</td> <td>$372,000</td> <td>4804</td> <td>b.williamson@datatables.net</td> </tr> </tbody> </table> </div>
</div> </div>

<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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Bootstrap buttons overflowing well, need to wrap and align

Sorry wasn't too sure how you wanted it formatted.

I double check your jsFiddle you provided.

Add this to the CSS part of the jsFiddle and the words will wrap as expected.

Added the text-align noticed that the texted stayed centered and you do not want that, so add the additional css text-align: left !important; The !important overrides the bootstrap css defaults.

a {
white-space: normal !important;
text-align: left !important;
}

I also updated my original jsFiddle

a {  white-space: normal !important;  text-align: left !important;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well well-sm">
<a href="" class="btn btn-link">link is really long and won't wrap on small screens</a> <a href="" class="btn btn-link">link</a>
</div>

Bootstrap table responsive break word

You need give width to the inner element of td.

.server-name a {  width: 157px;  word-wrap: break-word;  display:block;}
<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title>  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"></head><body>  <table class="table serverlist">    <thead>      <tr>        <th scope="col" class="rank">Ранг</th>         <th scope="col" class="server-name">Имя</th>         <th scope="col" class="version">Версия</th>         <th scope="col" class="server-info">Сервер</th>         <th scope="col" class="status">Игроков</th>         <th scope="col" class="online">Статус</th>         <th scope="col" class="rating">Рейтинг</th>      </tr></thead>     <tbody>      <tr>        <td class="rank">          <span>1</span>        </td>         <td class="server-name">          <a href="">Luminex - Semi-RPG Survival</a></td>         <td class="version">          <a href="">1.12.1</a>        </td>         <td class="server-info">          <div class="img-banner">            <img src="http://minecraftrating.ru/uploads/servers/29700/29700.gif?8185" alt="Sample Image">          </div>           <div class="server-ip clearfix"><p><i class="ion-ios-world"></i>             <span>play.minesuperior.com</span></p>             <a href="#!" onclick="copyToClipboard('play.minesuperior.com', $(this))" class="copy-action"><span class="copy-text"><i class="ion-scissors"></i>                          Копировать                        </span>            </a>          </div>        </td>         <td class="status">18/27</td>         <td class="online"><span class="badge badge-success">Online</span></td>        <td class="rating"><span class="balls">225 <i class="balls fa fa-star"></i></span> <span class="votes">335 <i class="votes fa fa-thumbs-up"></i></span></td>      </tr>  </table>  <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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script></body></html>

Forcing a long line of text (without spaces) to line break according to parent containers static width using CSS

You can use this to wrap :

.wrap { 
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera <7 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
}


Related Topics



Leave a reply



Submit