How to Word-Wrap Long Words in a Div

#parent {  width: 500px;  height: 500px;  border: solid 1px;  position: relative;}#child {  top: 20px;  left: 300px;  border: solid 1px;  position: absolute;}.wordwrap {  word-break: break-all;}

<div id="parent">  <div id="child" class="wordwrap">    asfasfafafsafafasfasfafafasfadvaavasdvavdvsavsvasvsvs  </div></div>

How to use word-wrap:break-word for a div without specifying width

Finally I did small change in my layout which given a standard result across all the browsers.

1. Added a table inside my div (Here my table will have only one row & one column).
2. Given the following styles to the table - "table-layout: fixed;width: 100%;word-wrap: break-word;"

Now user input will go into the table & it wraps the small words, breaks the long words if they are overflowing from the container.

wordwrap a very long string

This question has been asked here before:

• Who has solved the long-word-breaks-my-div problem? (hint: not stackoverflow)
• word wrap in css / js
• CSS: how can I force a long string (without any blank) to be wrapped in XUL and/or HTML
• CSS overflow with long URL

Long story short:

As far as CSS solutions go you have: overflow: scroll; to force the element to show scrollbars and overflow:hidden; to just cut off any extra text. There is text-overflow:ellipsis; and word-wrap: break-word; but they are IE only (break-word is in the CSS3 draft, however, so it will be the solution to this 5 years from now).

Bottom line is that if it is very important for you to stop this from happening with wrapping the text over to the next line the only reasonable solution is to inject ­ (soft hyphen), <wbr> (word break tag), or ​ (zero-width space, same effect as ­ minus hyphen) in your string server side. If you don't mind Javascript, however, there is the hyphenator which seems to be pretty solid.

How to prevent long words from breaking my div?

Soft hyphen

You can tell browsers where to split long words by inserting soft hyphen (­):

averyvery­longword

may be rendered as

averyverylongword

or

averyvery-

longword

A nice regular expression can ensure you won't be inserting them unless neccessary:

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

Browsers and search engines are smart enough to ignore this character when searching text, and Chrome and Firefox (haven't tested others) ignore it when copying text to clipboard.

<wbr> element

Another option is to inject <wbr>, a former IE-ism, which is now in HTML5:

averyvery<wbr>longword

Breaks with no hyphen:

averyvery

longword

You can achieve the same with zero-width space character ​ (or ​).

FYI there's also CSS hyphens: auto supported by latest IE, Firefox and Safari (but currently not Chrome):

div.breaking {
  hyphens: auto;
}

However that hyphenation is based on a hyphenation dictionary and it's not guaranteed to break long words. It can make justified text prettier though.

Retro-whining solution

<table> for layout is bad, but display:table on other elements is fine. It will be as quirky (and stretchy) as old-school tables:

div.breaking {
   display: table-cell;
}

overflow and white-space: pre-wrap answers below are good too.

How to break long words in CSS and HTML

@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>

white-space: pre-wrap;