Bootstrap工具提示包装和中断

Question

我有一个特殊的情况。如果我在工具提示中放入一个长文本，它会在工具提示框架上延伸，就像这样。

我将其添加到.tool-inner

后

word-break: break-all;

在这种情况下它可以正常工作。

然而，它仍然打破了这样的正常句子。

我创建了一个jsfiddle来说明我的所作所为。

Answer 1

使用word-wrap css属性而不是word-break。

  

自动换行属性允许长字被打破并换行到下一行。

/* Latest compiled and minified JavaScript included as External Resource */
$('#hoverme1, #hoverme2').tooltip();

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

.tooltip-inner{
  color: red;
  background-color: black;
  word-wrap: break-word;
  text-align: left;
  white-space: pre-line;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
Tooltip example
<br><br><br><br><br><br><br>

<a href="#" id ="hoverme1" data-toggle="tooltip" title="vocabularyvocabularyvocabularyvocabularyvocabularyvocabulary">long vocabulary</a>

<br>

<a href="#" id ="hoverme2" data-toggle="tooltip" title="This is very long sentence, and this is very important!">Nomal sentence</a>

Answer 2

您应该使用＆＃34; word-wrap: break-word＆＃34;代替

Answer 3

使用

white-space: wrap;

在你的css而不是

word-break: break-all;

Answer 4

我从white-space: pre-line;删除了.tooltip-inner并添加了max-width: none;

现在，工具提示将覆盖整个可用视图，并且仅在屏幕尺寸较小时才能正确包装。 Here是你小提琴的工作分支。