CSS 换行符和白色之后的跨度-space

Question

我正在尝试在使用 after 设置内容的 tootlip 中创建换行符，但我没有成功使用任何 white-space 值。如果需要，我希望它在 <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        &#009;
- line feed             &#010;
- carriage return       &#011;
- space                 &#012;

你想要这个吗？

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

更新同样使用 jquery 你可以替换任何单词，为了简化我在新行中使用了 <br> 键，所以它看起来像这样（我没有将字符串放入 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>

如果你的标题在 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');

.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

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

CSS 换行符和白色之后的跨度-space

CSS span after newline and white-space

html

css

whitespace

newline

tooltip