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>