CODEWITHSUNDEEP
htmlcss
stefen
stefen

Reputation: 39

CSS: Hyphenation syllable if not possible break word

I want to break my text. Actualy I use word-break: break-all; This does not look good so.

I want to try to cut after space and only if there's no possibility, cut it after any letter. 

<div class="name td" style="word-break: all;">
TestTestTestTestTestTestTestTestTestTestTestTestTe stTestTestTestTestTestTestTestTestTestTestTestTestTestTest
</div>

display: table-cell;
border: thin solid black;
padding: 5px;
height: 100%;
vertical-align: middle;
word-break: break-all;

I want to break after space if possible, else after any letter. Any ideas?

Upvotes: 1

Views: 2698

Answers (2)

Asons
Asons

Reputation: 87191

The word-wrap: break-word; will solve this for you, but not with the existing markup in combination with display: table-cell, as table-cell grows with content.

So to make your case work, you need to set table-layout: fixed; width: 100%; on the table, and add a div wrapper, which has the word-wrap: break-word;

.table {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.td {
  display: table-cell;
  border: thin solid black;
  padding: 5px;
  height: 100%;
  vertical-align: middle;
}
.td .wrapword {
  word-wrap: break-word;
}
<div class="table">
  <div class="name td">
    <div class="wrapword">
      TestTestTestTestTestTestTestTestTestTestTestTestTe stTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
    </div>
  </div>
</div>

Updated based on a comment

If growing horizontally is fine, then word-wrap: break-word; is enough.

.td {
  display: table-cell;
  border: thin solid black;
  padding: 5px;
  height: 100%;
  vertical-align: middle;
  word-wrap: break-word;
}
<div class="table">
  <div class="name td">
      TestTestTestTestTestTestTestTestTestTestTestTestTe stTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
  </div>
</div>

Upvotes: 1

Shailesh Daund
Shailesh Daund

Reputation: 180

Try word-wrap:break-word, it will break when it reaches to end of outer wrapper width.

<div class="name td" style="word-wrap: break-word;">
    TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
</div>

Upvotes: 0

Related Questions