Question

为了显示一条案文线(如论坛),并结束这一行文,“如果案文将超出该行(不使用CSS代码<>overflow<>/code>财产),则有多种方式。我仍在寻求最佳解决办法。例如,

在中央支助事务中添加“............”是一种可能性,但似乎一切时间,这不是一个好的解决办法。

Some sites just count the characters and if over - say - 100, truncates the string to keep only 100 (or 97) chars and add a "..." at the end. But fonts are usually not proportional, so the result is not pretty. For instance the space - in pixels - taken by

"AAA" and "iii" is clearly different
"AAA" and "iii" via a proportional font have the same width

另一种想法是,在扼杀物的 p体中达到准确的大小:

create in Javascript a DIV
insert the text in it (via innerHTML for instance)
measure the width (via .offsetWidth)

which is not implemented yet. However, I wonder if there could be any browser compatibility problem?
Did any one tried this solution? Other recommendations would be welcome.

Answer 1

因此,由于少有一份联合材料,我得以开展工作:。 http://jsfiddle.net/ug8Fc/3/。

基本上,它使用一种隐藏在背景中的圆形,来计算“参与者”的宽度(这应当允许几乎使用任何体,因为期限将相应延长)。然后,如果内容超过集装箱,则该集装箱为提纲留出空间,并保留去除特性,直至其适合。最后,它重述了经过修改的内容和斜线。

如果某人有激动,也许你会使其成为一种可适用于任何选择者的杂乱功能。

<!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>

Answer 2

可以通过使用<条码>文本流:斜线的芯片进行。不需要 ha。

Answer 3

这部法律确实帮助我,感谢!

但我注意到在以下几个方面有所加强:

1/ 解决在某些情况下体重不足的问题

替换:

<td class="preview">Hey bob, got any plans for new years yet?</td>

原文:

<td><div class="preview">Hey bob, got any plans for new years yet?</div></td>

<>0> 脚印与特定的字体(大小、重量、家庭......)良好。

你们需要把字体运用到你用来计算案文规模的“无形”的时代。例如(如有必要,可完成所有必要的不动产):

    (...)
    // 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 fontSize=$(this).css("font-size");
    spanTest.css("font-size", fontSize);
    var fontStyle=$(this).css("font-style");
    spanTest.css("font-style", fontStyle);
    var fontWeight=$(this).css("font-weight");
    spanTest.css("font-weight", fontWeight);
    var fontFamily=$(this).css("font-family");
    spanTest.css("font-family", fontFamily);
    (...)

I made a test with 1000 elements, each with 25 extra characters to remove (on Firefox 7) You script needs near 40s to finish the job.

问题似乎是“显示:无”的周期。

采用“定位:绝对;最高:100px”把窗外的间隔带上更好的性能: 大约11人处理1000个要素!

取代:

var spanTest = $( <span> ).css( display , none ).attr( id , span-test-tester );

原文:

var spanTest = $( <span> ).attr( id , span-test-tester ).css( position , absolute ).css( top , -100px );

www.un.org/Depts/DGACM/index_spanish.htm 最后:

再次感谢您的这封信...... 它非常有用!

这里,如果我能够帮助某人......,那么我完全的法典适应就是:

<!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 >

    .preview {    
    }

    .backg{
      background:red;
      margin: 20px 0;
      border:1px solid blue;
      width:200px;
      padding:10px;
      font-size:14px;  // change it to test with other fonts
      font-weight:bold;
    }

  </style>
  <script type= text/javascript >
  //<![CDATA[ 
  $(window).load(function(){
   truncate();
  });


  function truncate(){

    // Create a span we can use just to test the widths of strings
    var spanTest = $( <span> ).attr( id , span-test-tester ).css( position , absolute ).css( top , -100px );
    $( body ).append(spanTest);

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

    var nb =0;
    // now make all the previews fit
    $( .preview ).each(function(){
        nb++;

        // Get the current font and apply it to hidden span tester
        var fontSize=$(this).css("font-size");
        spanTest.css("font-size", fontSize);
        var fontStyle=$(this).css("font-style");
        spanTest.css("font-style", fontStyle);
        var fontWeight=$(this).css("font-weight");
        spanTest.css("font-weight", fontWeight);
        var fontFamily=$(this).css("font-family");
        spanTest.css("font-family", fontFamily);

        // 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(txt).append($( <span> ).text( ... ));
        }
    });

    }

  //]]> 

  </script>
</head>
<body>
      <div class="backg"><div class="preview">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</div></div>
      (... repeat 1000 times ...)
      <div class="backg"><div class="preview">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</div></div>

</body>
</html>

页: 1

友情链接