我希望我的工具提示中的文字是合理的,但不要像在CSS中那样在文字之间设置大的空格,而是通过调整容器宽度。
例如,这是工具提示
如果文本很多,我不希望我的工具提示拉伸到1000px,所以我将最大宽度设置为300px。
通过设置最大宽度,我会进入工具提示看起来很完美的情况,如果我稍微加宽了容器,在这种情况下为15px。
或者可能有一种情况,我想缩小文本元素以使其完全适合。
最好的方法是什么?
我能想到的最好的方法是得到最后的结论,将其包裹在一个跨度中,测量到边缘的距离,如果它小于50%,则要加宽或者如果要收缩容器,直到容器的高度变化为止意味着添加或删除了行
答案 0 :(得分:1)
试试这个:http://jsfiddle.net/hLMkD/1/
通过注入隐藏元素获取String的实际宽度,然后将工具提示的宽度设置为实际字符串的宽度(如果它在delta
定义的定义范围内
$(document).ready(function() {
$('.tooltip').each(function() {
var $this = $(this);
var delta = 20;
// get the real width of the string
var $tester = $('<div class="tester" />').appendTo('body').text($this.text());
var stringWidth = $tester.width();
$tester.remove();
if($this.width()+delta > stringWidth) {
$this.width(stringWidth);
}
});
});
希望我可以帮助一下,我觉得需要一些摆弄,但它应该指向你的想法。
我认为这个问题结束了,并且我们正在寻找一个纯CSS解决方案。您可以将工具提示设置为display:inline-block
,这样它只会占用文本所需的位置(这会解决您的缩小用例),然后设置max-width
到你想要的宽度。
答案 1 :(得分:1)
小提琴:http://jsfiddle.net/aslancods/jbGc6/7/
/* css */
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 12.6px;
} // to make font proper
.tool-tip {
display: inline-block;
word-break: break-all;
} // tool-tip set to inline-block, so that it wraps text we can calculate text width
/* tip-span class is added after setting width to tooltip */
.tip-span:after {
content: " "
}
.tip-span:last-child:after {
content: ""
}
<div class="tool-tip" id="tip" >
Maecenas ultricies dolor id fringilla ornare.
Vestibulum quis semper quam,
</div>
<div class="invisible" id="invisible"></div>
/* JS */
//get text inside tool-tip
var arr = $('.tip')[0].innerHTML.split(/\s+/);
//wrap each word with span and append to tool-tip
for( i=0; i< arr.length; i++ ) {
html += "<span>";
html += arr[i];
html += "</span>";
}
$('.tip')[0].innerHTML = html;
// len = no: of words
// get total width of text by calculating total tool-tip width
var tip_width = $('.tip').width();
// find by which number, tip_width is divisible. it is the no of lines or no of rows of text
// calculate width
// width = ( tip_width + ( no:of words * ( width taken by a space ) ) ) / no: of rows
for( i=2; i< len; i++ ) {
if( ( tip_width % i ) == 0 ){
setWidth = ( tip_width + (len * spaceWidth) ) / i;
if( setWidth <= 300 ) { // rows will choosen if it is lesser than 300
console.log( i )
break;
}
}
}
//set width to tool tip
tip.css({ 'width': setWidth+'px' });
答案 2 :(得分:0)
获取所需字符串的长度并应用所需的格式。
这是我思考的一个非常快速的例子。我希望我能详细说明,但你知道,还有很多事要做。希望它有所帮助。
<强> HTML 强>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="tooltip">
<p class="msg">Pork belly</p>
</div>
<div class="tooltip">
<p class="msg">Pork belly synth narwhal meggings next level before they sold out Carles mlkshk chia Brooklyn</p>
</div>
<div class="tooltip">
<p class="msg">Wes Anderson literally flannel Godard letterpress. Pinterest Carles artisan, PBR whatever cray cliche sustainable banjo fanny pack occupy Bushwick. +1 cred disrupt, DIY you probably haven't heard of them slow-carb blog authentic Portland </p>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="behavior.js"></script>
</body>
</html>
<强>的CSS 强> 。容器{ 宽度:600px; 保证金:0自动; }
.tiny{
width: 120px;
background: #369;
}
.medium{
width: 360px;
background: #963;
}
.big{
width: 600px;
background: #693;
}
<强> JS 强>
$(function() {
$.each($('.tooltip'), function(index, val) {
var msgLength = $('.msg',this).html().length;
if (msgLength <= 20) {
$(this).addClass('tiny');
}
else if(msgLength <= 100){
$(this).addClass('medium');
}
else{
$(this).addClass('big');
}
});
});
当然,如果你在de工具提示注入dom之后执行一个你无法适用的功能会更好。 :)
只是想表明一些方向。
告诉我发生了什么。
答案 3 :(得分:0)
这是新的,但已经编码了20年。我的答案属于“也许不这样做,试试这个”。
您是否有任何特殊原因需要仔细自定义宽度?获取特定文本所需的空间并不容易,特别是如果您必须支持多个浏览器和操作系统。
我最近不得不将工具提示添加到Microsoft Dynamics CRM中的自定义网页。页面是ASP,默认工具提示很糟糕。我和jquery一起玩了一段时间,无处可去。
我在MenuCool中找到了tooltip.js,并且可以快速轻松地实现它。免费试用,向老板展示。她喜欢它。在一个域及其所有子域上获得许可证需要20美元。
将css和js文件放入相应的文件夹并将其添加到页面后如下:
<script src="Scripts/tooltip.js" type="text/javascript"></script>
<link href="Styles/tooltip.css" rel="stylesheet" type="text/css" />
然后我可以像这样对弹出窗口进行编码:
onmouseover="tooltip.pop(this, this.value)"
简单,外观漂亮。它看起来很可定制,但我自己并没有这么做。