How to Force a Line Break in a Long Word in a Div

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

Can CSS force a line break after each word in an element?

Use

.one-word-per-line {
    word-spacing: <parent-width>; 
}

.your-classname{
    width: min-intrinsic;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: table-caption;
    display: -ms-grid;
    -ms-grid-columns: min-content;
}

where <parent-width> is the width of the parent element (or an arbitrary high value that doesn't fit into one line). That way you can be sure that there is even a line-break after a single letter. Works with Chrome/FF/Opera/IE7+ (and probably even IE6 since it's supporting word-spacing as well).

Automatically break up long words inside DIV container but prefer line breaking on spaces

You can set word-break property as break-word. I have updated your code and created a new fiddle. I think it will solve your problem
Check it out https://jsfiddle.net/yvLb6zer/

Force line break after first word in a div in React component

Why not use JS to break the string into two parts?

var sentence = "Business in three different continents.";
var firstWhiteSpace = sentence.indexOf(" ");
var firstWord = sentence.substr(0, firstWhiteSpace);
var restOfSentence = sentence.substr(firstWhiteSpace+1);

// Then you can use different divs for the first word and the rest of the 
// sentence and style then individually.
<div>firstWord</div>
<div>restOfSentence</div>

How to break a long string and make it continue on the next line?

Use something like:

p.test {
  word-break: break-all;
}

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