3

Vamos supor que tenha uma div, e que nela tenha um texto enorme, e você gostaria que cada linha fosse transformada em <p>. Como funcionaria?

O que eu realmente quero é, no começo de cada linha da div que tenha > fique com a cor verde, porém, ao tentar realizar isto, pega o texto todo.

Exemplo:

<p>Aqui está o texto todo, do nada quebro uma linha
>porém agora esta linha tem um caractere no começo
e este caractere fará com que mude a cor somente da linha
</p>

Eu peguei um script que um cara fez em uma pergunta minha anterior e editei, porém vai no texto todo, e não só a linha

$(document).ready(function(){
var green = $('#gt').val();
var first = green.charAt(0);
if(first == '>' || '&gt;'){
    $('#gt').addClass('green');
}else{
    $('#gt').removeClass('green');
}});

Quem puder esclarecer como isso funciona, ficarei grato. :)

2

1 Resposta 1

3

olha, talvez você não precise quebrar a sua div, você pode adicionar uma imagem com o ">" como background do p, então sete o line-height, padding-left e o background-size para o mesmo valor.

#lipsum p {
  line-height: 18px;
  padding-left: 18px;  
  background-size: 18px;
  background-image: url('http://cdn.flaticon.com/svg/81/81068.svg');
  background-repeat: repeat-y
}
<div id="lipsum">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo quam, dictum non elit quis, semper interdum purus. Nulla facilisi. Morbi semper consectetur turpis, ac vulputate lacus aliquet a. Morbi finibus, ligula et congue pretium, urna lacus faucibus felis, quis commodo risus sem in nisl. Proin nec pharetra tortor, et convallis odio. Morbi lorem turpis, eleifend in aliquet id, efficitur et magna. Nullam ac tellus ac felis euismod convallis.
  </p>
  <p>
    In a dolor in mi consectetur ornare tincidunt id quam. Sed euismod sit amet dui sit amet tempus. Duis vitae vulputate nisl. Integer nec erat vehicula, pulvinar risus non, bibendum ipsum. Vestibulum sed fringilla magna. Donec facilisis ultricies fermentum. Nulla quis neque massa. Praesent hendrerit lorem dui, eu pharetra nunc semper sit amet. Integer fringilla ante mattis nunc sodales rutrum. Integer ut dui nibh. Sed dictum ut massa in porta. Curabitur nec mauris commodo est vestibulum rhoncus ut interdum urna.
  </p>
  <p>
    Quisque in luctus dui, in ullamcorper erat. Nullam ac massa et dolor varius luctus. Mauris finibus, lectus quis tempus tempor, urna mi placerat risus, quis consectetur justo justo vel ante. Maecenas lacinia, quam et pulvinar pharetra, erat eros scelerisque sem, non interdum enim leo iaculis leo. Curabitur ullamcorper ultrices tincidunt. Mauris imperdiet ullamcorper mollis. Maecenas eget quam arcu. Nullam eleifend mauris et dui vehicula vehicula. Ut euismod nibh in est pulvinar facilisis. Suspendisse rutrum tempus eros non imperdiet. Mauris eget lacus ut sapien maximus ullamcorper eget et metus. Curabitur justo risus, auctor in pharetra non, ultrices eu sem. Praesent commodo enim sed maximus semper. Sed feugiat facilisis efficitur. Vestibulum vitae venenatis nulla, sit amet volutpat urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
  <p>
    Aliquam erat volutpat. Sed elementum urna ut massa sagittis convallis. Etiam cursus dictum nulla, nec bibendum odio dapibus et. Maecenas cursus vitae libero ac interdum. Nunc facilisis est turpis, id tincidunt leo blandit nec. Nulla efficitur, sapien in ullamcorper aliquet, sapien lacus semper purus, eleifend vulputate risus risus eget sapien. Curabitur sollicitudin lectus eget dapibus malesuada. Sed eget nulla at est iaculis cursus at sed urna. Maecenas vestibulum id nibh eget dictum.
  </p>
  <p>
    Nam consequat leo vel turpis vehicula finibus. Nulla gravida eget ante ut vestibulum. Donec ac ante quis purus facilisis dapibus eu in tortor. Ut quis nunc velit. Donec malesuada dolor sit amet tempus venenatis. Suspendisse dictum velit pretium, pharetra purus eu, maximus augue. Nam et velit et felis dapibus interdum. Sed hendrerit magna mauris, vel elementum nisl lobortis ac. Integer ultrices in augue sit amet feugiat. Donec gravida sollicitudin tellus, sed imperdiet eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu volutpat quam, nec lacinia arcu. Integer erat enim, commodo eget viverra sit amet, porta et quam. Aliquam in fermentum risus, ut bibendum purus. Integer at nunc neque. Vivamus volutpat leo in tortor laoreet, sit amet tincidunt tellus semper.
  </p>
</div>

Porém para ficar do jeito que você quer, vai ter que mudar a cor da imagem para verde.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .