<div id="modal1" class="modal">
  <h4>&amp;shy;</h4>
  <p>super&shy;fragilistic&shy;expiali&shy;docious</p>
</div>


<div id="modal2" class="modal">
  <h4>&lt;wbr/&gt;</h4>
  <p>super<wbr />fragilistic<wbr />expiali<wbr />docious</p>
</div>

<div id="modal3" class="modal">
  <h4>&lt;wbr/&gt;</h4>
  <p>
  Je&nbsp;suis&nbsp;<wbr />un&nbsp;titre<br />
  coupé&nbsp;là&nbsp;<wbr />où&nbsp;ça&nbsp;va&nbsp;<wbr />bien
  </p>
</div>
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

body{
  margin: 0;
  padding: 0;
  &:after{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    
    content: '';
    background-repeat: no-repeat;
    background-attachment: fixed;
    background: rgb(255,102,51);
    background: linear-gradient(
      180deg, 
      rgba(255,102,51,1) 0%, 
      rgba(255,51,102,1) 100%
    );
  }
}

h4{
  padding: 0;
  margin-bottom: 6px;
}

.modal{
  display: block;
  
  overflow: hidden;
  width: 110px;
  padding: 0 12px;
  margin: 10px auto 0 auto;
  resize: horizontal;
  
  background: white;
  border-radius: 4px;
  
  line-height: 90%;
  font:16px sans-serif;
}

p{
  margin: 6px 0;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.