Question

我希望我的工具提示中的文字是合理的，但不要像在CSS中那样在文字之间设置大的空格，而是通过调整容器宽度。

例如，这是工具提示

enter image description here

如果文本很多，我不希望我的工具提示拉伸到1000px，所以我将最大宽度设置为300px。

通过设置最大宽度，我会进入工具提示看起来很完美的情况，如果我稍微加宽了容器，在这种情况下为15px。

或者可能有一种情况，我想缩小文本元素以使其完全适合。

最好的方法是什么？

我能想到的最好的方法是得到最后的结论，将其包裹在一个跨度中，测量到边缘的距离，如果它小于50％，则要加宽或者如果要收缩容器，直到容器的高度变化为止意味着添加或删除了行

Answer 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到你想要的宽度。

再次检查http://jsfiddle.net/hLMkD/1/。

Answer 2

小提琴：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' });

Answer 3

获取所需字符串的长度并应用所需的格式。

这是我思考的一个非常快速的例子。我希望我能详细说明，但你知道，还有很多事要做。希望它有所帮助。

<强> 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之后执行一个你无法适用的功能会更好。：）

只是想表明一些方向。

告诉我发生了什么。

Answer 4

这是新的，但已经编码了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)"

简单，外观漂亮。它看起来很可定制，但我自己并没有这么做。

通过更改容器的宽度来证明文本

4 个答案: