How to break text at specifc word in an HTML table cell?-CodePudding

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 protected]; [email protected]

but it should look like:

First Name/Appartment, No.137, 
Joseph South Road, Sec. 2, Fortaleza, Country 
Tel:  55-8-1234567 
[email protected]; [email protected]

Appreciate any help!

CodePudding user response：

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 protected]; [email protected]<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 protected]; [email protected]
</p>

⚠️ user-modify is a deprecated feature

CodePudding user response：

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 protected]; [email protected]
    </td>
  </tr>
</table>

CodePudding user response：

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 >First Name</span>
     <span >Appartment, No.137</span> 
     <span >Joseph South Road, Sec. 2, Fortaleza, Country</span>
     <span >Tel:  55-8-1234567</span>
     <span >[email protected]; [email protected]</span>
    </td>
  </tr>
</table>