新行和空格后的CSS范围

Question

我正在尝试在我的tootlip中创建使用after设置内容的换行符，但我没有使用任何空白值。如果有必要，我希望它在<br>或其他换行符处中断。

.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

不要将字符串放入内容css中，只需使用\ n，html就是：

Name                   HTML Code
- horizontal tab        	
- line feed             

- carriage return       
- space                 

你想要这个吗？

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

<强>更新 同样使用jquery你可以替换任何单词，以简化我用新行使用<br>键，所以它看起来像这样（我没有把字符串放到jQuery中）

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

使用jQuery中的标题，您可以通过\n 


的$('.info').attr('data-title','Lorem ipsum dolor sit amet, consectetur adipiscing elit, \n sunt in culpa qui officia deserunt mollit anim id est laborum');瞬间以这种方式执行此操作

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

[
 {
   "name": "Release One",
   "songs": [
     "Song 1",
     "Song 2",
     "Song 3"
   ],
   "year": "2008"
 },
 {
   "name": "Release Two",
   "songs": [
     "Song 1",
     "Song 2",
     "Song 3",
     "Song 4",
     "Song 5"
   ],
   "year": "2010"
 },
 {
   "name": "Release Three",
   "songs": [
     "Song 1",
     "Song 2",
     "Song 3",
     "Song 4"
   ],
   "year": "2011"
 },
 {
   "name": "Release Four",
   "songs": [
     "Song 1",
     "Song 2",
     "Song 3",
     "Song 4",
     "Song 5"
    ],
   "year": "2011"
 }
]

＆＃13;

＆＃13;

＆＃13;

Answer 2

将<br>替换为
：

.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>