我的工具提示中有一个很长的字符串(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

最佳答案

CSS有一个属性可以打破较长的单词。它称为word-breakword-wrap

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


要么

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


这是演示链接:http://jsfiddle.net/cwv5r453/

07-28 02:28
查看更多