How to break text at specific word in an HTML table cell?

user_11832197 0
Viewed 56

I've seen many examples using style='"white-space:pre-wrap; word-wrap:break-word"; for example, but I didn't see how to break the text into multiple lines breaking at specific words.

So, this Fiddle currently displays:

First Name/Appartment, No.137, Joseph South Road, Sec. 2, Fortaleza, Country Tel: +55-8-1234567 email@email.com; email2@email2.com

but it should look like:

First Name/Appartment, No.137, 
Joseph South Road, Sec. 2, Fortaleza, Country 
Tel: +55-8-1234567 
email@email.com; email2@email2.com

Appreciate any help!

html-table css html
3 Answers

The line break element <br> works pretty good for this.

p {
  display: inline-block;
}
<p>First Name/Appartment, No.137,<br>
Joseph South Road, Sec. 2, Fortaleza, Countr<br>
Tel: +55-8-123456<br>
email@email.com; email2@email2.com<br>
</p>

-webkit-user-modify: read-write-plaintext-only; will print the text the same way it is in the markup.

p {
  -webkit-user-modify: read-write-plaintext-only;
}
<p>First Name/Appartment, No.137,
Joseph South Road, Sec. 2, Fortaleza, Countr
Tel: +55-8-123456
email@email.com; email2@email2.com
</p>

⚠️ user-modify is a deprecated feature

user_164963570

There's no way that white-space:pre-wrap; can wrap the line as you intended without any indications. Consider manually adding line breaks in your code and use white-space:pre-line; to preserve the breaks:

<table>
  <tr>
    <td class='address' style="white-space: pre-line;">First Name/Appartment, No.137, 
    Joseph South Road, Sec. 2, Fortaleza, Country 
    Tel: +55-8-1234567 
    email@email.com; email2@email2.com
    </td>
  </tr>
</table>

user_102892650

CSS Cares about document structure, not content, so you can't do what you want with just css.

You have a semantic structure to your html, use it. This way you can style each logical element as needed.

.name, .apptNum {display:inline-block;}
.name::after {content:'/';}
.apptNum::after {content: ',';}
.address, .tel, .email {display: block;}
<table>
  <tr>
    <td>
     <span class="name">First Name</span>
     <span class="apptNum">Appartment, No.137</span> 
     <span class="address">Joseph South Road, Sec. 2, Fortaleza, Country</span>
     <span class="tel">Tel: +55-8-1234567</span>
     <span class="email">email@email.com; email2@email2.com</span>
    </td>
  </tr>
</table>

user_46650
Related