Breaking text using div

Asked

Viewed 60 times

-1

I need the text to break automatically and continue to show below the number.

.circulo{
 border: 1px solid #000;
 border-radius:25px;
 width:25px;
 height:25px;
 text-align:center;
 vertical-align: middle;

 line-height:25px;    
 box-shadow: 2px 2px 5px ;
}

#conteudo00 {
	margin: 0 auto;
	text-align: left;
}

section{
text-align:left;
}

.div0{
display:inline-block;
}
<section>
<div class='div0'><div class='circulo'><font size=+1>1</font></div></div>
<div class='div0' id="conteudo00"><font size=+1>&nbsp;Acesse seu e-mail</font></div>
</section>
<br>
<section>
<div class='div0'><div class='circulo'><font size=+1>2</font></div></div>
<div class='div0' id="conteudo00"><font size=+1>&nbsp;Abra o e-mail que acabei de te enviar - Caso não ache, procure no SPAM e no lixo eletrônico em seu e-mail.</font></div>
</section>
<br>
<section>
<div class='div0'><div class='circulo'><font size=+1>3</font></div></div>
<div class='div0' id="conteudo00"><font size=+1>&nbsp;Clique no link de download</font></div>
</section>
<br>
<section>
<div class='div0'><div class='circulo'><font size=+1>4</font></div></div>
<div class='div0' id="conteudo00"><font size=+1>&nbsp;Leia o Ebook com Muita Atenção</font></div>
</section>
<br>
<section>
<div class='div0'><div class='circulo'><font size=+1>5</font></div></div>
<div class='div0' id="conteudo00"><font size=+1>&nbsp;Fique de olhos nos meus próximos e-mails, enviarei conteúdos!</font></div>
</section>
<br>
<section>
<div class='div0'><div class='circulo'><font size=+1>6</font></div></div>
<div class='div0' id="conteudo00"><font size=+1>&nbsp;Clique no botão ao topo desta página para receber conteúdos EXCLUSIVOS  no meu canal do Telegram</font></div>
</section>

1 answer

-1

You can use the property text-indent in the text to indent the first line, and use position: absolute; in the circle.

.circulo {
    border: 1px solid #000;
    border-radius: 25px;
    width: 25px;
    height: 25px;
    text-align: center;
    vertical-align: middle;

    line-height: 25px;
    box-shadow: 2px 2px 5px;

    position: absolute;
    font-size: 18px;
}

.div0 {
    text-indent: 40px;
    font-size: 18px;
    line-height: 1.6;  
}

section {
    position: relative;
}
<section>
    <div class='circulo'>2</div>
    <div class='div0'>Abra o e-mail que acabei de te enviar - Caso não 
        ache, procure no SPAM e no lixo eletrônico em seu e-mail.
    </div>
</section>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.