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

时间:2014-02-20 16:26:52

标签: javascript dom text width

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

例如,这是工具提示

enter image description here

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

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

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

最好的方法是什么?

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

4 个答案:

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

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

答案 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)"

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