Question

我的工具提示中有一个非常长的字符串（string1，string2）（注意：中间有一个逗号，string1和string2非常长）。

当我显示它时，工具提示无法显示完整的长字符串。只是想知道我可以更改哪个css属性以使工具提示正确显示长字符串？

示例代码：

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
   <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="center">
   <a href="#" rel="tooltip" title="Lorem_ipsum_dolor_sit_amet,consectetur adipiscing elit. Maecenas bibendum ac felis id commodo. Etiam mauris purus, fringilla id tempus in, mollis vel orci. Duis ultricies at erat eget iaculis.">Hover here please</a>
  </div>
</body>
</html>

的CSS：

.center {
  margin: 20em auto;
  width: 400px;
}


/*Change the size here*/
div.tooltip-inner {
    max-width: 450px;
}

JS：

$(document).ready(function () {
  $("a").tooltip({
    'selector': '',
    'placement': 'top',
    'container':'body'
  });
});

$('.auto-tooltip').tooltip();

Demo

Answer 1

CSS有一个属性打破更长的单词。它叫word-break或word-wrap

div.tooltip
{
    word-break: break-all;
}

OR

div.tooltip
{
    word-wrap: break-word;
}

以下是演示链接：http://jsfiddle.net/cwv5r453/

如何在bootstrap工具提示中处理长文本值？

1 个答案: