Actually a question.

.txtbox h4:after { content: ","; display: inline-block; } .txtbox { float: left; } .txtbox p { float: none; } .txtbox p:before { content: "\00ab"; display: block; height: 100%; color: #467797; font-family: 'PT Sans Bold'; font-size: 72px; line-height: 100%; width: 12%; float: left; } 
 <div class="txtbox"> <h4>Иванов Иван</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam.</p> </div>

  • remove float: left; from styles - Grundy
  • Clarify the question! - HamSter
  • It is necessary that the text does not flow around the opening quote. - Alexander

1 answer 1

Option 1 with vh:

 .txtbox h4:after { content: ","; display: inline-block; } .txtbox { float: left; } .txtbox p { float: none; } .txtbox p:before { content: "\00ab"; display: block; height: 100vh; color: #467797; font-family: 'PT Sans Bold'; font-size: 72px; line-height: 100%; width: 12%; float: left; } 
 <div class="txtbox"> <h4>Иванов Иван</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam.</p> </div>

Option 2 with position:

 .txtbox h4:after { content: ","; display: inline-block; } .txtbox { float: left; } .txtbox p { position: relative; padding-left: 12%; } .txtbox p:before { content: "\00ab"; display: block; height: 100%; color: #467797; font-family: 'PT Sans Bold'; font-size: 72px; line-height: 100%; width: 12%; position: absolute; left: 0; } 
 <div class="txtbox"> <h4>Иванов Иван</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam.</p> </div>

Option 3 with table-cell:

 .txtbox h4:after { content: ","; display: inline-block; } .txtbox { float: left; } .txtbox p { display:table; } .txtbox p:before { content: "\00ab"; display: table-cell; vertical-align: top; color: #467797; font-family: 'PT Sans Bold'; font-size: 72px; line-height: 100%; width: 12%; } 
 <div class="txtbox"> <h4>Иванов Иван</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam.</p> </div>

Option 4 with flex:

 .txtbox h4:after { content: ","; display: inline-block; } .txtbox { float: left; } .txtbox p { display: flex; align-items: flex-start; } .txtbox p:before { content: "\00ab"; display: table-cell; vertical-align: top; color: #467797; font-family: 'PT Sans Bold'; font-size: 72px; line-height: 100%; width: 12%; padding: 0 1rem; } 
 <div class="txtbox"> <h4>Иванов Иван</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta blanditiis esse nostrum sit beatae ad repellendus repellat, sint perspiciatis excepturi magni commodi eius facere! Dignissimos consequatur, deleniti obcaecati quibusdam.</p> </div>

  • First option. But in your case, the height is too big and expands the block. Is there any way to make the height not exceed the height of the parent? - Alexander