<main>
<h1>word-break: break-all</h1>
<p class="top">Watch out for the angry duck.</p>
<h1>line-break: anywhere</h1>
<p class="bottom">Watch out for the angry duck.</p>
</main>
body {
display: grid;
place-items: center;
min-height: 100vh;
margin: 0;
color: #fff;
background-image: linear-gradient(20deg, #b3f6d8, #007ea7);
font: 1.5rem/1.333 'Oxygen Mono', monospace;
overflow-x: hidden;
}
@media (max-width: 500px) {
body {
font-size: 1.125rem;
}
}
main {
position: relative;
margin: 15px 10px;
}
main::after {
content: '';
display: block;
position: absolute;
top: 16px;
left: calc(28ch + 9px);
bottom: 0;
border-left: 2px dashed #fff6;
}
h1 {
position: relative;
z-index: 2;
width: min-content;
margin: 0 10px;
padding: 5px 10px;
border-radius: 4px;
background-color: #000;
font-weight: normal;
font-size: 0.667em;
white-space: nowrap;
transform: translateY(50%);
}
p {
width: 28ch;
margin: 0 0 15px;
padding: 20px 10px 10px;
border-radius: 4px;
background-color: #0006;
}
.top {
word-break: break-all;
}
.bottom {
line-break: anywhere;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.