CODEWITHSUNDEEP
htmlcsshtml-table
user31782
user31782

Reputation: 7587

How to force word wrap on table with width auto?

Reading some previous post I came to know about that to wrap text in table we need to add table-layout: fixed and word-wrap: break-word. But this is not working if there isn't any fixed width to table

.container {

  width: 30%;
  padding: 5px;
  background: #888;
  border: 1px dotted red;
  }

.table {
  display: table;
  table-layout: fixed;
  width: auto;
  word-wrap: break-word;
  }
<div class="container">
  <div class="table">
  <a href="#">unbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabel</a>
</div>
  
  </div>

On my website I have a sort of situation where I cannot give fixed width to element with display table.

How do I achieve line breaks so as text don't overflow?

Upvotes: 4

Views: 4567

Answers (2)

Callum
Callum

Reputation: 855

You can use the CSS property word-break to do this.

word-break: break-all breaks all cells content to multiple lines to fit the width.

.table {
   display: table;
   table-layout: fixed;
   width: auto;
   word-break: break-all;
}

Check http://www.w3schools.com/cssref/css3_pr_word-break.asp for other values of the property.

Upvotes: 3

Deep
Deep

Reputation: 9804

Try with giving the .table element width and the anchor element word-wrap: break-word;

.container {
  width: 500px;
  padding: 5px;
  background: #888;
  border: 1px dotted red;
}
.table {
  display: table;
  table-layout: fixed;
  width: 100%
}
a {
  word-wrap: break-word;
}
<div class="container">
  <div class="table">
    <a href="#">unbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabelunbreajabel</a>
  </div>

</div>

Upvotes: 0

Related Questions