For a similar issue, I used display: inline-block on the <a> tag, which seems to help. And word-break: break-all as I was concerned with long URLs not wrapping.
So, this in your case essentially...
.tab_title a {
display: inline-block;
word-break: break-all;
}
For a similar issue, I used display: inline-block on the <a> tag, which seems to help. And word-break: break-all as I was concerned with long URLs not wrapping.
So, this in your case essentially...
.tab_title a {
display: inline-block;
word-break: break-all;
}
For me it worked in both Chrome and IE with:
.word-hyphen-break {
word-break: break-word;
word-wrap: break-word;
width: 100%;
}
like this no need to configure specific width.
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.
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
<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>You can use below css instead of yours:
.spanClass {
display: inline-block;
word-wrap: break-word;
word-break: break-all;
}
IE10 is a browser that is no longer supported and Microsoft do not invest time in developing new features or adapting it to updating technologies(JS, CSS etc...).
To currently resolve your issue you can give the container that holds the text a fixed width in pixels. IE10 would then remove any overflowing-x content to the next line. This is the best you can achieve if needed to support IE10. You can see that IE10 does not respect the word-break value in pic attached:
Link to check: https://caniuse.com/#search=break-word
In my case for example(in which I was required to support a certain item card container inner text overflowing on the x axis(horizontally) - what I did is give width: 120px; and was able to make IE10 respect this width and break the sentence.
While I do believe you don't need display: flex in .item, the following will work across browsers:
.item {
display: flex;
flex-direction: column;
width: 33vw;
word-break: break-word; /* Chrome, Safari */
word-wrap: break-word; /* IE11, Firefox */
}
Why does this work?
It would be naive to simply say that flex-direction: column forces the flex block to respect the element's width. The explanation is far more complicated, I hope some CSS guru could shed some light on this one.
Is there any specific reason you need display: flex in .item? If not, then word-wrap: break-word will do the same thing in IE/FF:
.item {
/* display:flex; */
width: 33vw;
/* word-break: break-word; */
word-wrap: break-word;
}
word-break: break-word is deprecated, and not supported by MS Edge or MS IE. See mozilla documentation about this.
word-break is supported by MS Edge and MS IE Here is a list of supported browsers.
Valid MS Edge and MS IE word-break properties are:
word-break: normal|break-all|keep-all|initial|inherit|unset;
Alternatively mozilla documentation specifies that overflow-wrap: break-word; acts the way that you want word-break: break-word to function.
An alternative solution is to make use of the word-wrap property which IMHO behaves more 'intelligently' - meaning the word break will only be applied when the word is too long to fit into a line width, and won't be applied to words that can simply be moved in whole to the next line.
CSS:
word-wrap: break-word;
The word-wrap property is supported by most browsers and as of today I can certainly confirm it works in Microsoft Edge, IE11, Chrome, Firefox, Opera and Safari.
Note, word-wrap has now been renamed to overflow-wrap, with word-wrap now being an alternative name for that property, however overflow-wrap is not understood by Microsoft Edge so stick with using word-wrap for cross-browser compatability.
I have had good success in Chrome, Firefox and IE with using only:
word-break: break-word;
word-wrap: break-word;
In my problem case I was already using:
display: table-cell;
and I ended up having to include
max-width: 440px;
to get wrapping in all browsers. In most cases the max-width was not necessary.
#grid2{
white-space: pre-wrap;
word-wrap: break-word;
}
This should work for IE11, but not for IE9
In order to ensure that the answer is obvious to people visiting this question in the future: the OP (wesley) answered the question himself in the comments beneath the question:
The cause of the problem is that Internet Explorer 11 makes textarea elements inherit whatever white-space property is applied to the direct parent.
The resolution is to apply white-space: pre-wrap to the textarea, as identified by Jean-François Beauchamp.
add CSS
{width: 100%}
this will wrap the text to its tag