Wrap a long single word using CSS

Question

I tried to wrap a single word which contains around 500+ chars in a div.

<table><tr><td style="width: 100px;" colspan=""><div class="wordwrap"><p>
dwhjifuidfinrnvfrvgjsrfjoejwofjjfpijqfpqejospjfcjcdefjipwejpfjespfjweokpwoefweeeepWSPgjwrqeo[fj[ejwo[jfqjfo[cfj[e[awfjw[fw[ofj[sejfpjwerpjfpwrjgjrjghyhefdjsjflkfasjgfiosdjfgsfgsdfiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiigrwewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewettttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttu
</p></div> </td></tr></table>

with this solution provided In Is there a way to word-wrap long words in a div?

<style type="text/css">
 .wordwrap { 
   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 */
}
 </style>

But it is not working. Followed this Is there any way to wrap html text when 'all one word' is used? also . What could be the problem?

Just add display:table; in your class. – Rajnikant Kakadiya Aug 14 '13 at 10:45 — Rajnikant Kakadiya, Aug 14 '13 at 10:45
If you remove the table around it, it works for me. – DrColossos Aug 14 '13 at 10:45 — DrColossos, Aug 14 '13 at 10:45

Danield · Answer 1 · 2017-07-04T08:26:34.093

Because your long word is within a <table> - you need to add table-layout: fixed;

table { 
   width: 100%; 
   word-wrap:break-word;
   table-layout: fixed;
}

table { 
   width: 100%; 
   word-wrap:break-word;
   table-layout: fixed;
}

<table ><tr><td style="width: 100px;" colspan=""><div class="wordwrap"><p>
dwhjifuidfinrnvfrvgjsrfjoejwofjjfpijqfpqejospjfcjcdefjipwejpfjespfjweokpwoefweeeepWSPgjwrqeo[fj[ejwo[jfqjfo[cfj[e[awfjw[fw[ofj[sejfpjwerpjfpwrjgjrjghyhefdjsjflkfasjgfiosdjfgsfgsdfiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiigrwewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewettttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttu

</p></div> </td></tr></table>

FIDDLE

Explanation:

The default value for table-layout is auto which means that the browser will decide the width of a column based on the content of the table cells.

In this case, the table layout algorithm will look at that really long word and say: 'heck, i'll need a really wide column to fit that word in'

By setting table-layout to fixed - The browser determines the width of the columns based on the width of the cells in the first row without taking into account the amount of content present in other rows. (See MDN)

Here, there is one row with one cell - so table-layout: fixed says: make that cell the width of the entire table! (was has width: 100%)

NB: For table-layout: fixed to take effect, the width of the table must be set (with a value other than auto)

For more details about table-layout - See this article

score 8 · Answer 2 · answered Aug 14 '13 at 10:35

8

word-wrap: break-word should give you the result you’re after.

answered Aug 14 '13 at 10:35

Martin Bean

38,379
25
128
201

score 7 · Answer 3 · edited Jul 08 '19 at 13:28

7

Here is the code you should use:

.wrapword {
  width: 200px;
  -ms-word-break: break-all;
  word-break: break-all;
  white-space: pre-wrap
}

<div class="wrapword">
  dswfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfug
</div>

edited Jul 08 '19 at 13:28

double-beep

5,031
17
33
41

answered Jul 08 '19 at 13:24

Sethupathy

71
1
1

score 2 · Answer 4 · answered Aug 14 '13 at 10:45

You've also got HTML5's <wbr> tag: http://www.quackit.com/html_5/tags/html_wbr_tag.cfm which lets you specify suitable break points

dwhjifuidfinrnvfrvgjsrfjoejwofjjfpijqfpqej<wbr>ospjfcjcdefjipwejpfjespfjweokpwoefweeeepWSPgjwrqeo

It might not be what you want, but it's worth playing around with

score 1 · Answer 5 · answered Aug 14 '13 at 10:35

1

There is property in css:

.selector {
    word-wrap: normal|break-word;
}

answered Aug 14 '13 at 10:35

Ashwani

3,463
1
24
31

score 0 · Answer 6 · answered Aug 14 '13 at 10:35

Try add some overflow - hidden, scroll, auto ...

 .wordwrap { 
   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 */
   overflow:hidden;
}

Also your Followed answer contains oveflow: scroll;

score -2 · Answer 7 · edited Aug 06 '15 at 17:06

-2

Try this. It worked for me.

<html>
<head></head>
<body>
  <div style="width:200px;">
    <span style="width:100%;table-layout:fixed;word-wrap:break-word;display:inline-table">
      hadfskldfjsdjlfjlsdkflkdsfsdrfsdfsdfsfsdfsdfsdfsdfsdfsd
    </span>
  <div>
</body>
</html>

edited Aug 06 '15 at 17:06

showdev

28,454
37
55
73

answered Aug 06 '15 at 14:56

Ramesh

1

Wrap a long single word using CSS

7 Answers7

Explanation:

Linked

Related