Break Long Word With Css

@page {  size: A4;  margin: 1cm;}
.table,td,th {  border: 1px solid #ddd;  text-align: left;}
.table {  border-collapse: collapse;  width: 100%;  table-layout: fixed;}
.table th,td {  padding: 5px;  text-align: center;}
.td {  word-break: break-word;}
.list-group h3 {  font-size: 3em;}
.list-group p {  font-size: 1em;}
.table1 {  width: 100%;  max-width: 100%;  margin-bottom: 5px;  background-color: #fff;  border: none;  text-align: center;}

<div class="container">  <div class="card">    <table class="table1">      <td><img src="https://mytabtime.com/wp-content/uploads/2018/09/myTABtime-com-logo-240.png" alt="logo" /></td>      <td>        <div class="list-group">          <h3>Company Report</h3>          <p>Date - {% now "jS F Y H:i" %}</p>        </div>      </td>    </table>    <br/>    <table class="table">      <thead>        <tr>          <th>#</th>          <th>Company Name</th>          <th>Company Email</th>          <th>Count Of Total Users</th>          <th>Created Date</th>          <th>Current Monthly Payment</th>          <th>Is TABopts Customer</th>          <th>Status</th>        </tr>      </thead>      <tbody>        {% if companies %} {% for company in companies %}        <tr>          <td class="td">{{ forloop.counter }}</td>          <td class="td">{{ company.company_name }}</td>          <td class="td">{{ company.company_email }}afsdasdfasdfasdf</td>          <td class="td">{{ company.number_of_company_users }}</td>          <td class="td">{{ company.company_created |date:"M d, Y" }}</td>          <td class="td">{{ company.company_monthly_payment }}</td>          <td class="td">{{ company.company_tab_opts }}</td>          <td class="td">{{ company.company_status }}</td>        </tr>        {% endfor %} {% endif %}      </tbody>    </table>  </div></div>

CSS word-break: break-all; (only for long words)?

I think you're looking for word-break: break-word; or overflow-wrap: break-word;. Here's how MDN Web Docs describes break-word:

To prevent overflow, normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.

The page goes on to note that it is not supported in Firefox and Internet Explorer.

The Caniuse reference for word-break notes that break-word is unofficial and treated like overflow-wrap: break-word; (overflow-wrap is a synonym of word-wrap).

As it so happens, overflow-wrap seems to have pretty good support, so you'd probably be better off with that instead.

How to force a line break in a long word in a DIV?

Use word-wrap:break-word;

It even works in IE6, which is a pleasant surprise.

word-wrap: break-word has been replaced with overflow-wrap: break-word; which works in every modern browser. IE, being a dead browser, will forever rely on the deprecated and non-standard word-wrap instead.

Existing uses of word-wrap today still work as it is an alias for overflow-wrap per the specification.

Smarter word break in CSS?

Try word-break: break-word; it should behave as you expect.

css break word with hyphen

Chrome does not do hyphenation apparently (at least on Windows). You may fare better with other browsers or platforms. You can use ­ (soft hyphen) if you know in advance where you want to break. Otherwise, at least in Chrome on Windows there's no way to get a hyphen when CSS breaks a long word, unless it was in the input to start with.

.content {  max-height: 80px;  width: 200px;  overflow-x: hidden;  word-wrap: break-word;  padding: 10px;  font-weight: bold;  font-size: 16px;  border: solid 1px #000;}

Using soft hyphen:<div class="content">BERUFSBILDUNGSZEN­TRUM</div>    
Using automatic hyphenation (doesn't work in Chrome)<div class="content" lang="de" style="hyphens: auto; ">BERUFSBILDUNGSZENTRUM</div>
Soft hyphen not displayed if it doesn't break there<div class="content" style="width: 400px; ">BERUFSBILDUNGSZEN­TRUM</div>

averyvery­longword

/([^\s-]{5})([^\s-]{5})/ → $1­$2

averyvery<wbr>longword

div.breaking {
  hyphens: auto;
}

div.breaking {
   display: table-cell;
}