How to set 'flex ratio' with some paragraph [duplicate] - html

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?

Answer 1

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

Answer 2

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

Answer 3

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>

Answer 4

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

Answer 5

There is property in css:
.selector {
word-wrap: normal|break-word;
}

Answer 6

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;

Answer 7

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>