word-wrap break-word does not work in this example

HtmlCss

Html Problem Overview

I cannot get word-wrap to work with this example...

<html>
<head></head>
<body>

<table style="table-layout:fixed;">
<tr>
<td style="word-wrap: break-word; width:100px;">ThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrap</td>
</tr>
</table>

</body></html>

I remembered reading that a layout had to be specified (which I did), but beyond that I'm not sure what I have to do to get this to work. I really would like this to work in Firefox. Thanks.

EDIT: Failed in Chrome 19 and Firefox 12, it works in IE8. I tried doctype strict and transitional, neither worked.

Html Solutions

Solution 1 - Html

Mozilla Firefox solution

Add:

display: inline-block;

to the style of your td.

Webkit based browsers (Google Chrome, Safari, ...) solution

Add:

display: inline-block;
word-break: break-word;

to the style of your td.

Note: Mind that, as for now, break-word is not part of the standard specification for webkit; therefore, you might be interested in employing the break-all instead. This alternative value provides a undoubtedly drastic solution; however, it conforms to the standard.

Opera solution

Add:

display: inline-block;
word-break: break-word;

to the style of your td.

The previous paragraph applies to Opera in a similar way.

Solution 2 - Html

Word-Break has nothing to do with inline-block.

Make sure you specify width and notice if there are any overriding attributes in parent nodes. Make sure there is not white-space: nowrap.

see this codepen

<!-- language: lang-html -->

<html>

<head>
</head>

<body>
  <style scoped>
    .parent {
      width: 100vw;
    }

    p {
      border: 1px dashed black;
      padding: 1em;
      font-size: calc(0.6vw + 0.6em);
      direction: ltr;
      width: 30vw;
      margin:auto;
      text-align:justify;
      word-break: break-word;
      white-space: pre-line;
      overflow-wrap: break-word;
      -ms-word-break: break-word;
      word-break: break-word;
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto;
    }


    }
  </style>
  <div class="parent">

    <p>
      Note: Mind that, as for now, break-word is not part of the standard specification for webkit; therefore, you might be interested in employing the break-all instead. This alternative value provides a undoubtedly drastic solution; however, it conforms to
      the standard.

    </p>

  </div>

</body>

</html>

<!-- end snippet -->

Solution 3 - Html

Use this code (taken from css-tricks) that will work on all browser

overflow-wrap: break-word;
word-wrap: break-word;

-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;

/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;

Solution 4 - Html

max-width: 100px;
white-space: break-spaces;

Solution 5 - Html

This combination of properties helped for me:

display: inline-block;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: normal;
line-break: strict;
hyphens: none;
-webkit-hyphens: none;
-moz-hyphens: none;

Solution 6 - Html

to get the smart break (break-word) work well on different browsers, what worked for me was the following set of rules:

#elm {
    word-break:break-word; /* webkit/blink browsers */
    word-wrap:break-word; /* ie */
}
-moz-document url-prefix() {/* catch ff */
    #elm {
        word-break: break-all; /* in ff-  with no break-word we'll settle for break-all */
	}
}

Solution 7 - Html

> This code is also working:

<html>
<head></head>
<body>

<table style="table-layout:fixed;">
<tr>
<td style="word-break: break-all; width:100px;">ThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrap</td>
</tr>
</table>

</body></html>

Solution 8 - Html

word-wrap property work's with display:inline-block:

display: inline-block;
word-wrap: break-word;
width: 100px;

Solution 9 - Html

  • inline-block is of no use in this scenario

SOLUTION

  • word-break: normal|break-all|keep-all|break-word|initial|inherit;
    Simple Answer to your doubt is Use above and make sure white-space: nowrap nowhere used.

NOTE FOR BETTER UNDERSTANDING:

  • word-wrap/overflow-wrap is used to break words that overflow their container

  • word-break property breaks all words at the end of a line, even those that would normally wrap onto another line and wouldn’t overflow their container.

  • word-wrap is the historic and nonstandard property. It has been renamed to overflow-wrap but remains an alias, browsers must support in future. Many browsers (especially the old ones) don’t support overflow-wrap and require word-wrap as a fallback (which is supported by all).

  • If you want to please the W3C you should consider associate both in your CSS. If you don’t, using word-wrap alone is just fine.

Solution 10 - Html

Just specify the width of the container to be 100 and then add display: block.

<div class="parent"><span>dummy text dummy text dummy text dummy text </span></div>
.parent
{
width:100%;
display:block
}
Categories
Recommended Html Solutions
Recommended Css Solutions

Previous Solution:

Getting all arguments and values passed to a function

Python

Next Solution:

std::thread calling method of class

C++MultithreadingC++11

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionb10hazardView Question on Stackoverflow
Solution 1 - HtmlStencilView Answer on Stackoverflow
Solution 2 - HtmlFarshid AshouriView Answer on Stackoverflow
Solution 3 - HtmlSunny S.MView Answer on Stackoverflow
Solution 4 - HtmlRubel HossainView Answer on Stackoverflow
Solution 5 - HtmlD.DimitriogloView Answer on Stackoverflow
Solution 6 - HtmlshayunaView Answer on Stackoverflow
Solution 7 - Htmluser10254257View Answer on Stackoverflow
Solution 8 - HtmlBalajiView Answer on Stackoverflow
Solution 9 - HtmlRitu GuptaView Answer on Stackoverflow
Solution 10 - HtmlRehan RajpootView Answer on Stackoverflow