我有一个特殊情况。如果我在工具提示中放入一段长文本,它会扩展并超出工具提示框架,就像这样。
在我将此添加到.tool-inner
之后word-break: break-all;
在这种情况下它可以正常工作。
但是,它仍然会像这样破坏正常的句子。
我已经创建了一个jsfiddle来说明我的做法。我有一个特殊情况。如果我在工具提示中放入一段长文本,它会扩展并超出工具提示框架,就像这样。
在我将此添加到.tool-inner
之后word-break: break-all;
在这种情况下它可以正常工作。
但是,它仍然会像这样破坏正常的句子。
我已经创建了一个jsfiddle来说明我的做法。使用 word-wrap
CSS 属性代替 word-break
。
word-wrap
属性允许长单词被分割并换行到下一行。
/* 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>
我从你的.tooltip-inner
中移除了white-space: pre-line;
,并添加了max-width: none;
所以现在工具提示将覆盖整个可用视图,并在屏幕尺寸较小时适当换行。这里是你的fiddle的一个可以工作的分支。
使用
white-space: wrap;
在你的 CSS 中,不要使用
word-break: break-all;