Word break not working

If you are attempting to wrap very long words or hyperlinks within a narrow container, you may experience text overflowing when viewing your results in IE11. This may happen despite using the CSS declaration word-wrap: break-word; in IE 11, but looks fine in other browsers. See below:

There are ways of handling long words and URLs using forced breaks, hyphenation, ellipsis, etc). See the terrific article here on the CSS Tricks website: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

What if you do not want a hyphen or ellipsis to appear? Using word-wrap: break-word; overflow-wrap: break-word; word-break: break-all; word-break: break-word; or even the Microsoft CSS Browser Prefix declaration -ms-word-break: break-all;, may not work. It didn’t for me.

The solution, using the HTML, ZERO-WIDTH-SPACE Unicode Character ​.

CSS

#container { 
  width: 120px;
  background-color:#ccc;
  border: 1px solid #aaa;
  margin: 50px 50px 0;
}

.break {
  word-wrap: break-word;
}

HTML

<div id="container">
  <p>Donec sit amet erat porta, rhoncus dolor nec, <span class="break">scelerisqueaghtr​afdssf</span> accumsan leo. Phasellus eu ipsum aliquam, <a class="break" href="www.samplewebsite.com/reallylongurl">www.reallylong​websiteurl​.com/reallylongurl</a> rutrum orci a, pulvinar elit. Aenean auctor dignissim tempus.</p>
</div>

You have to insert the unicode character whereever you want the breaks to occur. See the final result below.

body {
  width: 200px;
}
.bg {
  fill: #beeb1b;
}
.cap {
  fill: #aaa8a9;
}
.trunk {
  fill: #231f20;
}

<svg xmlns="http://www.w3.org/2000/svg" tabindex="0" viewBox="0 0 351.33 722" aria-labelledby="bottletitle bottledesc" role="img">
    <title id="bottletitle">
        Bottle
    </title>
    <desc id="bottledesc">
        Bottle with battery indicator inside
    </desc>
    <g data-name="Layer 4" class="bg">
        <rect width="351.33" height="722" rx="23.33" ry="23.33"/>
    </g>
    <g data-name="Layer 3" class="cap">
        <rect x="146.81" y="60.9" width="57.71" height="73.67"/>
    </g>
    <g data-name="Layer 2" class="trunk">
        <path d="M173,153.25h57.75V223s1.08,25.33,30.41,56c27.06,28.29,35.34,60.33,35,71.33-.21,7,0,324.67,0,324.67s-3.33,7.33-9.33,7.33H117.12s-9-.33-9-6.66v-325s-.33-33,30.34-67c0,0,34.33-32.67,34.33-60.67S173.33,153.63,173,153.25Z" transform="translate(-26.46 -18.67)"/>
    </g>
    <svg viewBox="0 0 24 24">
        <defs>
            <linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0">
                <stop offset="0%" stop-opacity="1" stop-color="#2ecc71"/>
                <stop offset="24.2%" stop-opacity="1" stop-color="#2ecc71"/>
                <stop offset="24.2%" stop-opacity="0" stop-color="#2ecc71"/>
                <stop offset="100%" stop-opacity="0" stop-color="#2ecc71"/>
                <animate attributeName="y2" from="1" to="0" dur="500ms" repeatCount="2s" fill="freeze"/>
            </linearGradient>
        </defs>
        <path fill="url(#lg)" d="M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4z" stroke="#fff" transform="scale(.5,.5) rotate(90,12 12) translate(45,-12)"/>
        <text text-anchor="middle" dominant-baseline="middle" style="font:700 2.5px sans-serif;fill:#deba78" x="12" y="23">
            24.2%
        </text>
    </svg>
</svg>

Comments

* Honor fixed widths on frames other than table cells
* For table cells, make a fixed width override the natural max width

Addresses #382
Addresses #1017
Addresses #2248

* Honor fixed widths on frames other than table cells
* For table cells, make a fixed width override the natural max width

Addresses #382
Addresses #1017
Addresses #2248

* Honor fixed widths on frames other than table cells
* For table cells, make a fixed width override the natural max width

Addresses #382
Addresses #1017
Addresses #2248

Answer by Alberto Curtis

When I’m using word-wrap:break-word with Browser Mode: IE9 Compatibility View and Document Mode: IE7 standards its working perfectly fine. However when I change the Document Mode: IE9 standards, its not working.
I’ve also tried using -ms-word-wrap:break-word however its giving me the same result.,it should work, .your_class_name{word-break:break-word;}, i have tested it in ie7 — ie9 and it breaks the word…,Adding -ms-word-break: break-word; worked for me.,

Stack Overflow for Teams
Where developers & technologists share private knowledge with coworkers

you need to have

table {
    width:100%;
    table-layout:fixed;
}

Answer by Bellamy Shepherd

The solution, using the HTML, ZERO-WIDTH-SPACE Unicode Character ​.,If you are attempting to wrap very long words or hyperlinks within a narrow container, you may experience text overflowing when viewing your results in IE11. This may happen despite using the CSS declaration word-wrap: break-word; in IE 11, but looks fine in other browsers. See below:,There are ways of handling long words and URLs using forced breaks, hyphenation, ellipsis, etc). See the terrific article here on the CSS Tricks website: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/,What if you do not want a hyphen or ellipsis to appear? Using word-wrap: break-word; overflow-wrap: break-word; word-break: break-all; word-break: break-word; or even the Microsoft CSS Browser Prefix declaration -ms-word-break: break-all;, may not work. It didn’t for me.

CSS

#container { 
  width: 120px;
  background-color:#ccc;
  border: 1px solid #aaa;
  margin: 50px 50px 0;
}

.break {
  word-wrap: break-word;
}

HTML

<div id="container">
  <p>Donec sit amet erat porta, rhoncus dolor nec, <span class="break">scelerisqueaghtr​afdssf</span> accumsan leo. Phasellus eu ipsum aliquam, <a class="break" href="www.samplewebsite.com/reallylongurl">www.reallylong​websiteurl​.com/reallylongurl</a> rutrum orci a, pulvinar elit. Aenean auctor dignissim tempus.</p>
</div>

Answer by Ila Perez

-max-content it is not supported by IE, according to CanIuse.,So I created a fallback for IE that might help you, by setting .button to display:inline-block:,It’s working, but I don’t want to display the elements inline.,The CSS word-wrap: break-word; works only in display:block; or display:inline-block; elements so you can just use:

I have a small css script that force <a> tag word-wrap in a div. It worked fine on FF, Chrome but didn’t work on IE9. How can I fix it?

.tab_title a{
    word-wrap: break-word;
} 

Answer by Kairi Buck

Note: In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.,Report a problem with this content on GitHub,This example compares the results of overflow-wrap, word-break, and hyphens when breaking up a long word.,Browser compatibility

/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;

/* Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: revert;
overflow-wrap: unset;

Answer by Nash Miller

Also ran into this issue with the ML anomalies table, where fields like job IDs cannot contain spaces, so long values will overflow the cells in Firefox and Edge.,
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
,This property is being used a couple of times for tables to prevent content from overflowing. Works in Chrome:,@cchaos Reopening — fallback styles in #864 doesn’t seem to have been applied to the word-break property on table cells (screenshot on IE11):

Add fallback to just break-all in FF and IE

Answer by Ariya Abbott

It doesn’t work in IE 8 and 9. Do you have any suggestions for IE 8 and 9 for word-wrap: break-word; ?,I’m sorry that last code is working for me in IE8 at the moment…. but not in IE9. I rechecked,for me it does not seem’s to work on Chrome and firefox.,word wrap is not working in this website in firefox

The word-wrap property accepts two values, one of which is the default:

.selector {
  word-wrap: normal; /* the default */
}

.selector-2 {
  word-wrap: break-word;
}

The word-wrap property allows long words to be able to be broken and wrap onto the next line.

How do you break words between lines?

1. Hyphens are used to divide words at the end of a line when the word cannot fit on the remainder of the line.
2. Divide the word between syllables.
3. The hyphen goes at the end of the first line.
4. Prefixes and suffixes make natural divisions.

How do you break break all in Word?

The “word-break: break-all;” will break the word at any character so the result is to difficulty in reading whereas “word-wrap: break-word;” will split word without making the word not break in the middle and wrap it into next line. Example 1: This example display the break-all property values.

Words or unbroken strings will not break, even if they overflow the container. break-word : words or strings of characters that are too large to fit inside their container will break in an arbitrary place to force a line break. A hyphen character will not be inserted, even if the hyphens property is used.

Can I use word wrap?

What is a text wrap?

Text wrap is a feature supported by many word processors that enables you to surround a picture or diagram with text. The text wraps around the graphic. Text wrap in HTML is most fequently used to describe wrapping of text around an image in the HTML code.

What is wrap text explain with example?

In Microsoft Excel and other spreadsheet programs, Wrap Text is a feature that shows all information in a cell, even if it overflows the cell boundary. For example, the image shows that cell G2 has text that is cut off because the adjacent cell H2 has text.

Where can you find the Wrap Text button?

On the Home tab, in the Alignment group, click Wrap Text .

What is the purpose of wrap text option?

The text wrap you will probably use the most is the square text wrap, but there are other text wraps too. Tight/Through—Text wraps around image, regardless of what shape the image is….Text Wrap Options.

What is wrap text class9?

mini835. In computing, word wrapping is a process by which a word which comes at the end of a line is automatically moved onto a new line in order to keep the text within the margins.

How do you wrap text in a cell?

Wrap text automatically On the Home tab, in the Alignment group, click Wrap Text. (On Excel for desktop, you can also select the cell, and then press Alt + H + W.) Notes: Data in the cell wraps to fit the column width, so if you change the column width, data wrapping adjusts automatically.

How do I change text wrapping in Word?

Select Format and then under Arrange, select Wrap Text. Choose the wrapping option that you want to apply. Tip: To change a picture or drawing object’s position on the page relative to the text, select the picture or object, select Format > Position, and then select the position that you want.

What is word wrap in Notepad?

Sometimes referred to as a run around and wrap around, word wrap is a feature in text editors and word processors. It moves the cursor to the next line when reaching the end without requiring you to press Enter .

What is word wrap answer?

: a word processing feature that automatically transfers a word for which there is insufficient space from the end of one line of text to the beginning of the next.

What is word wrap and alignment What are the types of alignment?

Alignment: Alignment refers to the way text is arranged in the document between the margins. In horizontal alignment, paragraphs of text can be left aligned (flush against the left margin), right aligned (flush against the right margin), or centered (each line within the paragraph centered between the margins).

What is mean notepad?

simple text editor

What is the use of a notepad?

Notepad is a basic text editor that’s built into Windows. It is excellent for writing relatively short text documents that you want to save as plain text.

What are the parts of notepad?

Answer

• ▪︎Quick access toolbar.
• ▪︎Title bar.
• ▪︎Ribbon.
• ▪︎Text area.
• ▪︎Status bar.
• ▪︎Wordpad button.
• ▪︎Scroll bar.
• ▪︎Ruler.

How do I open Notepad?

Using Short Menu

1. Right-click on the lower left corner of your Start screen to bring up the short start menu.
2. Select “Apps” at the bottom of the menu, which brings up a list of all installed apps on your computer.
3. Find Notepad in the list under the “Windows Accessories” category and click the item to start the program.

What is the shortcut key to open Notepad?

Open Notepad by pressing the Windows key (or Ctrl-Esc) and N. You can also open it by pressing the Windows key and R (if necessary), typing notepad.exe, and pressing Enter.

Is there a notepad on this phone?

Real Notepad : Notebook is a very realistic, Windows like, port of the Notepad app. Running the app essentially gives you the Windows Notepad app on Android. You do not need a rooted device. The app lets you copy/paste text, customize the font, and save to TXT and HTML (and other) formats.

What is the shortcut key to open files?

Press Alt+F to open the File menu.

What is Ctrl +F?

What is Ctrl-F? Also known as Command-F for Mac users (although newer Mac keyboards now include a Control key). Ctrl-F is the shortcut in your browser or operating system that allows you to find words or phrases quickly. You can use it browsing a website, in a Word or Google document, even in a PDF.

What is Ctrl +N?

☆☛✅Ctrl+N is a shortcut key often used to create a new document, window, workbook, or another type of file. Also referred to as Control N and C-n, Ctrl+N is a shortcut key most often used to create a new document, window, workbook, or another type of file.

What is the function of CTRL A to Z?

Ctrl + A → Select all content. Ctrl + Z → Undo an action. Ctrl + Y → Redo an action.

What is Ctrl I for?

Alternatively referred to as Control+I and C-i, Ctrl+I is a keyboard shortcut most often used to italicize and unitalicize text. On Apple computers, the keyboard shortcut to toggle italics is Command + I .

What is Ctrl H?

Alternatively referred to as Control H and C-h, Ctrl+H is a shortcut key that varies depending on the program being used. For example, in most text programs, Ctrl+H is used to find and replace text in a file. In an Internet browser, Ctrl+H may open the history.

What are 5 shortcuts?

Word shortcut keys

• Ctrl + A — Select all contents of the page.
• Ctrl + B — Bold highlighted selection.
• Ctrl + C — Copy selected text.
• Ctrl + X — Cut selected text.
• Ctrl + N — Open new/blank document.
• Ctrl + O — Open options.
• Ctrl + P — Open the print window.
• Ctrl + F — Open find box.

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

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

</body></html>

10 Answers

display: inline-block;

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

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

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;

<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>

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;

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

#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 */
    }
}

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

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

</body></html>

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

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