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.
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;
Work-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][1] 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>
加载中...
