CSS span after newline and white-space

Question

I am trying to create newline in my tootlip that uses after to set content, but I have no success with any of white-space values. I want it to break at <br> or other newline character if necessary.

 .info { position: relative; display: inline-block; line-height: normal; font: 11px Arial, sans-serif; text-align: center; cursor: pointer; width: 14px; height: 13px; color: #fff; padding-top: 1px; left: 20px; top: 50px; background: #338ce6; border-radius: 100%; } .info:after { background: #338ce6; border-radius: 2px; font-size: 12px; white-space: pre; bottom: 25px; color: #fff; content: attr(data-title); left: -20px; padding: 5px 8px; position: absolute; z-index: 9999999; } 

 <span class="info" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, <br> sunt in culpa qui officia deserunt mollit anim id est laborum">?</span> 

JSFiddle

Answer 1

Don't put the string into content css, just use \\n, html is :

Name                   HTML Code
- horizontal tab        	
- line feed             

- carriage return       
- space                 

So do you want this?

 .info { position: relative; display: inline-block; line-height: normal; font: 11px Arial, sans-serif; text-align: center; cursor: pointer; width: 14px; height: 13px; color: #fff; padding-top: 1px; left: 20px; top: 50px; background: #338ce6; border-radius: 100%; } .info:after { background: #338ce6; border-radius: 2px; font-size: 12px; white-space: pre; bottom: 25px; color: #fff; content: attr(data-title); left: -20px; padding: 5px 8px; position: absolute; z-index: 9999999; } 

 <span class="info" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit,&#010; sunt in culpa qui officia deserunt mollit anim id est laborum">?</span> 

UPDATE Also using jquery you can replace any word, to simplify I used <br> key with the new line, so it look like this (I didn't put the string into jQuery)

  $(document).ready(function(){ $('span').each(function(){ var a = $(this).attr('data-title'); var b = a.replace('<br>','\\n'); $(this).attr('data-title', b); }); }); 

 .info { position: relative; display: inline-block; line-height: normal; font: 11px Arial, sans-serif; text-align: center; cursor: pointer; width: 14px; height: 13px; color: #fff; padding-top: 1px; left: 20px; top: 50px; background: #338ce6; border-radius: 100%; } .info:after { background: #338ce6; border-radius: 2px; font-size: 12px; white-space: pre; bottom: 25px; color: #fff; content: attr(data-title); left: -20px; padding: 5px 8px; position: absolute; z-index: 9999999; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="info" data-title="'Lorem ipsum dolor sit amet, consectetur adipiscing elit, <br> sunt in culpa qui officia deserunt mollit anim id est laborum">?</span> 

With your title in jQuery you can do it in this way ,by using \\n instant of 


 $('.info').attr('data-title','Lorem ipsum dolor sit amet, consectetur adipiscing elit, \\n sunt in culpa qui officia deserunt mollit anim id est laborum'); 

 .info { position: relative; display: inline-block; line-height: normal; font: 11px Arial, sans-serif; text-align: center; cursor: pointer; width: 14px; height: 13px; color: #fff; padding-top: 1px; left: 20px; top: 50px; background: #338ce6; border-radius: 100%; } .info:after { background: #338ce6; border-radius: 2px; font-size: 12px; white-space: pre; bottom: 25px; color: #fff; content: attr(data-title); left: -20px; padding: 5px 8px; position: absolute; z-index: 9999999; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="info" data-title="">?</span> 

Answer 2

Replace the <br> with 
 :

 .info { position: relative; display: inline-block; line-height: normal; font: 11px Arial, sans-serif; text-align: center; cursor: pointer; width: 14px; height: 13px; color: #fff; padding-top: 1px; left: 20px; top: 50px; background: #338ce6; border-radius: 100%; } .info:after { background: #338ce6; border-radius: 2px; font-size: 12px; white-space: pre; bottom: 25px; color: #fff; content: attr(data-title); left: -20px; padding: 5px 8px; position: absolute; z-index: 9999999; } 

 <span class="info" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, &#xa; sunt in culpa qui officia deserunt mollit anim id est laborum">?</span>