首页 > 编程语言> 文章详细

JavaScript中的CSS溢出检测

2019-07-26 13:36:28 阅读：88 来源： 互联网

标签：javascript css

为了显示一行文本(如在论坛中),如果文本溢出该行(不使用CSS溢出属性截断),则以“…”结束该行,有许多方法.我仍在寻求最佳解决方案.例如,

在CSS中添加“…”作为背景图像是可能的,但它会一直出现,这不是一个好的解决方案.

有些网站只计算字符数,如果超过 – 比如100,则截断字符串以仅保留100(或97)个字符并在末尾添加“…”.但字体通常不成比例,所以结果并不漂亮.例如,空间 – 以像素为单位 – 采用

>“AAA”和“iii”明显不同
>“AAA”和“iii”通过比例字体具有相同的宽度

还有另一个想法是获得字符串的确切大小(以像素为单位)：

>在Javascript中创建一个DIV
>在其中插入文本(例如通过innerHTML)
>测量宽度(通过.offsetWidth)

尚未实施.但是,我想知道是否存在任何浏览器兼容性问题？
有人试过这个解决方案吗？其他建议将受到欢迎.

解决方法:

所以,有了一点JS我就能让它工作：http://jsfiddle.net/ug8Fc/3/

基本上,它使用隐藏在背景中的虚拟跨度来计算“内容”的宽度(这应该允许使用几乎任何类型的字体,因为跨度将相应地扩展).然后,如果内容超过容器,它为省略号腾出空间并继续删除字符直到它适合.最后,它重新添加修改后的内容和省略号.

如果有人精力充沛,也许你可以使它成为一个jquery函数,可以更容易地应用于任何选择器.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">  
  <style type='text/css'>
    table {
      border: 1px solid #000;
      border-collapse: collapse;
      border-spacing: 0;
      width: 800px;
    }
    table thead {
      background-color: #AAA;
      color: #333;
    }
    table tbody tr {
      border: 1px solid #000;
    }
    table tbody td {
      padding: 2px;
    }
    .from {
      width: 100px;
    }
    .preview {
    }
    .date {
      width: 90px;
    }
  </style>
  <script type='text/javascript'>
  //<![CDATA[ 
  $(window).load(function(){
    // Create a span we can use just to test the widths of strings
    var spanTest = $('<span>').css('display','none').attr('id','span-test-tester');
    $('body').append(spanTest);

    // function to get the length of a string
    function getLength(txt){
        return spanTest.text(txt).width();
    }

    // now make all the previews fit
    $('table tbody .preview').each(function(){
        // build a bench-mark to gauge it from
        var roomWidth = $(this).innerWidth();

        // now, get the width and play with it until it fits (if it doesn't)
        var txt = $(this).text();
        var contentsWidth = getLength(txt);
        if (contentsWidth > roomWidth){ // bigger than we have to work with
            roomWidth -= getLength('...'); // work within confines of room + the ellipsis
            while (contentsWidth > roomWidth){ 
                txt = txt.substring(0,txt.length-1);
                contentsWidth = getLength(txt);
            }
            // set the text to this
            $(this).text(spanTest.text()).append($('<span>').text('...'));
        }
    });

  });
  //]]> 
  </script>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th class="from">From</th>
        <th class="preview">Subject</th>
        <th class="date">Date</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="from">Joe Smith</td>
        <td class="preview">Hello bob, I just wanted to check in and see how things were going.
            I know we spoke last week about etc. etc. etc.</td>
        <td class="date">Dec 1, 2010</td>
      </tr>
      <tr>
        <td class="from">John Doe</td>
        <td class="preview">Hey bob, got any plans for new years yet?</td>
        <td class="date">Dec 28, 2010</td>
      </tr>
      <tr>
        <td class="from">Ben Franklin</td>
        <td class="preview">Happy New Year! Hope you had a great time at the casinos (and didn't
            spend too much money (haha)). Hope to see you this Memorial day blah blah blah
      </tr>
    </tbody>
  </table>
</body>
</html>

标签：javascript,css
来源： https://codeday.me/bug/20190726/1544516.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript中的CSS溢出检测