với

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

"..." sẽ được hiển thị ở cuối dòng nếu bị tràn. Tuy nhiên, điều này sẽ chỉ được hiển thị trong một dòng. Nhưng tôi muốn nó được hiển thị trong nhiều dòng.

Nó có thể trông giống như:

+--------------------+
|abcde feg hij   dkjd|
|dsji jdia js ajid  s|
|jdis ajid dheu d ...|/*Here it's overflowed, so "..." is shown. */
+--------------------+

Ngoài ra còn có một số plugin jquery xử lý vấn đề này, nhưng nhiều plugin không xử lý nhiều dòng văn bản. Các tác phẩm sau:

• http://pvdspek.github.com/jquery.autoellipsis/
• http://dotdotdot.frebsite.nl/
• http://keith-wood.name/more.html
• http://github.com/tbasse/jquery-truncate

Ngoài ra còn có một số xét nghiệm phôi .

Tôi đã hack xung quanh cho đến khi tôi xoay sở để đạt được điều gì đó gần với điều này. Nó đi kèm với một vài cảnh báo:

1. Đó không phải là CSS thuần túy; bạn phải thêm một vài yếu tố HTML. Tuy nhiên không có JavaScript yêu cầu.
2. Dấu chấm lửng được căn phải trên dòng cuối cùng. Điều này có nghĩa là nếu văn bản của bạn không được căn chỉnh đúng hoặc hợp lý, có thể có một khoảng cách đáng chú ý giữa từ hiển thị cuối cùng và dấu chấm lửng (tùy thuộc vào độ dài của từ ẩn đầu tiên).
3. Không gian cho dấu chấm lửng luôn được dành riêng. Điều này có nghĩa là nếu văn bản vừa vặn trong hộp gần như chính xác, nó có thể bị cắt ngắn một cách không cần thiết (từ cuối cùng bị ẩn, mặc dù về mặt kỹ thuật nó sẽ không phải).
4. Văn bản của bạn cần phải có màu nền cố định, vì chúng tôi đang sử dụng hình chữ nhật màu để ẩn dấu chấm lửng trong trường hợp không cần thiết.

Tôi cũng nên lưu ý rằng văn bản sẽ bị phá vỡ ở một ranh giới từ, không phải là một ranh giới ký tự. Điều này là có chủ ý (vì tôi cho rằng điều đó tốt hơn cho các văn bản dài hơn), nhưng vì nó khác với những gì text-overflow: ellipsisnó làm, tôi nghĩ tôi nên đề cập đến nó.

Nếu bạn có thể sống với những cảnh báo này, HTML sẽ trông như thế này:

<div class="ellipsify">
    <div class="pre-dots"></div>
    <div class="dots">&hellip;</div>
    <!-- your text here -->
    <span class="hidedots1"></span>
    <div class="hidedots2"></div>
</div>

Và đây là CSS tương ứng, sử dụng ví dụ về hộp rộng 150 pixel với ba dòng văn bản trên nền trắng. Nó giả định rằng bạn có một thiết lập lại CSS hoặc tương tự để đặt lề và phần đệm về 0 khi cần thiết.

/* the wrapper */
.ellipsify {
    font-size:12px;
    line-height:18px;
    height: 54px;       /* 3x line height */
    width: 150px;
    overflow: hidden;
    position: relative; /* so we're a positioning parent for the dot hiders */
    background: white;
}

/* Used to push down .dots. Can't use absolute positioning, since that
   would stop the floating. Can't use relative positioning, since that
   would cause floating in the wrong (namely: original) place. Can't 
   change height of #dots, since it would have the full width, and
   thus cause early wrapping on all lines. */
.pre-dots {
    float: right;
    height: 36px;  /* 2x line height (one less than visible lines) */
}

.dots {
    float: right; /* to make the text wrap around the dots */
    clear: right; /* to push us below (not next to) .pre-dots */
}

/* hides the dots if the text has *exactly* 3 lines */
.hidedots1 {
    background: white;
    width: 150px;
    height: 18px;       /* line height */
    position: absolute; /* otherwise, because of the width, it'll be wrapped */
}

/* hides the dots if the text has *less than* 3 lines */
.hidedots2 {
    background: white; 
    width: 150px;
    height: 54px;       /* 3x line height, to ensure hiding even if empty */
    position: absolute; /* ensures we're above the dots */
}

Kết quả trông như thế này:

Để làm rõ cách thức hoạt động của nó, đây là cùng một hình ảnh, ngoại trừ đó .hidedots1là màu đỏ và .hidedots2màu lục lam. Đây là những hình chữ nhật ẩn dấu chấm lửng khi không có văn bản vô hình:

Đã thử nghiệm trong IE9, IE8 (mô phỏng), Chrome, Firefox, Safari và Opera. Không hoạt động trong IE7.

Đây là một bài viết css-trick gần đây thảo luận về điều này.

Một số giải pháp trong bài viết trên (không được đề cập ở đây) là

1) -webkit-line-clampvà 2) Đặt một yếu tố được định vị tuyệt đối ở phía dưới bên phải với độ mờ dần

Cả hai phương pháp đều giả sử đánh dấu sau:

<div class="module"> /* Add line-clamp/fade class here*/
  <p>Text here</p>
</div>

với css

.module {
  width: 250px;
  overflow: hidden;
}

1) -webkit-line-kẹp

kẹp FIDDLE (.. cho tối đa 3 dòng)

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  max-height: 3.6em; /* I needed this to get it to work */
}

2) mờ dần

Giả sử bạn đặt chiều cao dòng thành 1,2em. Nếu chúng ta muốn phơi bày ba dòng văn bản, chúng ta chỉ cần tạo chiều cao của thùng chứa 3.6em (1.2em × 3). Các tràn ẩn sẽ ẩn phần còn lại.

Làm mờ dần FIDDLE

p
{
    margin:0;padding:0;
}
.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
}
.fade:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

Giải pháp số 3 - Một sự kết hợp sử dụng @supports

Chúng tôi có thể sử dụng @supports để áp dụng kẹp dòng trên webkit trên các trình duyệt webkit và áp dụng mờ dần trong các trình duyệt khác.

@supports kẹp-kẹp với fiddle fallback

<div class="module line-clamp">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

CSS

.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.line-clamp {
      position: relative;
      height: 3.6em; /* exactly three lines */
    }
.line-clamp:after {
      content: "";
      text-align: right;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 70%;
      height: 1.2em;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
 }

@supports (-webkit-line-clamp: 3) {
    .line-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;  
        max-height:3.6em; /* I needed this to get it to work */
        height: auto;
    }
    .line-clamp:after {
        display: none;
    }
}

Liên kết dưới đây cung cấp giải pháp HTML / CSS thuần túy cho vấn đề này.

Hỗ trợ trình duyệt - như đã nêu trong bài viết:

Cho đến nay chúng tôi đã thử nghiệm trên Safari 5.0, IE 9 (phải ở chế độ tiêu chuẩn), Opera 12 và Firefox 15.

Các trình duyệt cũ hơn vẫn sẽ hoạt động khá tốt, vì phần cốt lõi của bố cục nằm ở các thuộc tính định vị, lề và phần đệm thông thường. nếu nền tảng của bạn cũ hơn (ví dụ: Firefox 3.6, IE 8), bạn có thể sử dụng phương thức này nhưng làm lại độ dốc dưới dạng hình ảnh PNG độc lập hoặc bộ lọc DirectX.

http://www.mobify.com/dev/multiline-ellipsis-in-pure-css

các css:

p { margin: 0; padding: 0; font-family: sans-serif;}

.ellipsis {
    overflow: hidden;
    height: 200px;
    line-height: 25px;
    margin: 20px;
    border: 5px solid #AAA; }

.ellipsis:before {
    content:"";
    float: left;
    width: 5px; height: 200px; }

.ellipsis > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px; }        

.ellipsis:after {
    content: "\02026";  

    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;

    float: right; position: relative;
    top: -25px; left: 100%; 
    width: 3em; margin-left: -3em;
    padding-right: 5px;

    text-align: right;

    background: -webkit-gradient(linear, left top, right top,
        from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);           
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); }

html:

<div class="ellipsis">
    <div>
        <p>Call me Ishmael.  Some years ago &ndash; never mind how long precisely &ndash; having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.  It is a way I have of driving off the spleen, and regulating the circulation.  Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off &ndash; then, I account it high time to get to sea as soon as I can.</p>  
    </div>
</div>

câu đố

(thay đổi kích thước cửa sổ trình duyệt để thử nghiệm)

Sau khi xem qua thông số W3 cho tràn văn bản , tôi không nghĩ rằng điều này là có thể khi chỉ sử dụng CSS. Ellipsis là một thuộc tính mới, vì vậy có lẽ nó chưa nhận được nhiều sử dụng hoặc phản hồi.

Tuy nhiên, anh chàng này dường như đã hỏi một câu hỏi tương tự (hoặc giống hệt) và ai đó đã có thể đưa ra một giải pháp jQuery hay. Bạn có thể giới thiệu giải pháp tại đây: http://jsfiddle.net/MPkSF/

Nếu javascript không phải là một lựa chọn, tôi nghĩ bạn có thể không gặp may ...

Chỉ muốn thêm vào câu hỏi này cho hoàn toàn vì lợi ích.

• Opera có hỗ trợ không chuẩn cho cái gọi là -o-ellipsis-lastline này .
• dotdotdot là một plugin jQuery tuyệt vời mà tôi có thể giới thiệu.

Câu hỏi tuyệt vời ... Tôi ước có câu trả lời, nhưng đây là câu hỏi gần nhất bạn có thể nhận được với CSS những ngày này. Không có dấu chấm lửng, nhưng vẫn còn sử dụng được.

overflow: hidden;
line-height: 1.2em;
height: 3.6em;      // 3 lines * line-height

Tôi đã tìm thấy giải pháp css (scss) này hoạt động khá tốt. Trên các trình duyệt webkit, nó hiển thị dấu chấm lửng và trên các trình duyệt khác, nó chỉ cắt bớt văn bản. Đó là tốt cho mục đích sử dụng của tôi.

$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;

h2 {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Một ví dụ của người tạo: http://codepen.io/martinwolf/pen/qlFdp

Đây là giải pháp gần nhất tôi có thể nhận được chỉ bằng css.

HTML

<div class="ellipsis"> <span>...</span>
Hello this is Mr_Green from Stackoverflow. I love CSS. I live in CSS and I will never leave working on CSS even my work is on other technologies.</div>

CSS

div {
    height: 3em;
    line-height: 1.5em;
    width: 80%;
    border: 1px solid green;
    overflow: hidden;
    position: relative;
}
div:after {
    content:". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
    background-color: white;
    color: white;
    display: inline;
    position: relative;
    box-shadow: 8px 1px 1px white;
    z-index: 1;
}
span {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: white;
}

Work Fiddle ( thay đổi kích thước cửa sổ để kiểm tra )

Liên kết với blog của tôi để giải thích

Cập nhật Fiddle

Tôi hy vọng bây giờ một số chuyên gia css sẽ có ý tưởng về cách làm cho nó hoàn hảo. :)

Có nhiều câu trả lời ở đây nhưng tôi cần một câu trả lời là:

• Chỉ CSS
• Bằng chứng trong tương lai (tương thích hơn với thời gian)
• Sẽ không phá vỡ các từ (chỉ phá vỡ trên không gian)

Thông báo trước là nó không cung cấp dấu chấm lửng cho các trình duyệt không hỗ trợ -webkit-line-clampquy tắc (hiện là IE, Edge, Firefox) nhưng nó sử dụng một gradient để làm mờ văn bản của chúng.

.clampMe {
  position: relative;
  height: 2.4em; 
  overflow: hidden;
}

.clampMe:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 1.2em; /* Just use multiples of the line-height */
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%);
}

/* Now add in code for the browsers that support -webkit-line-clamp and overwrite the non-supportive stuff */
@supports (-webkit-line-clamp: 2) {
  .clampMe {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
  }
  
  .clampMe:after {
    display: none;
  }
}

<p class="clampMe">There's a lot more text in here than what you'll ever see. Pellentesque habitant testalotish morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

Bạn có thể thấy nó hoạt động trong CodePen này và bạn cũng có thể thấy một phiên bản Javascript tại đây (không có jQuery).

Hơi muộn với bữa tiệc này nhưng tôi nghĩ ra, theo tôi nghĩ, là một giải pháp độc đáo. Thay vì cố gắng chèn dấu chấm lửng của riêng bạn thông qua thủ thuật css hoặc js, tôi nghĩ tôi sẽ thử và cuộn với giới hạn chỉ một dòng. Vì vậy, tôi sao chép văn bản cho mỗi "dòng" và chỉ sử dụng thụt lề văn bản phủ định để đảm bảo một dòng bắt đầu khi dòng cuối cùng dừng lại. VĨ CẦM

CSS:

#wrapper{
    font-size: 20pt;
    line-height: 22pt;
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.text-block-line{
    height: 22pt;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    width: auto;
}
.text-block-line:last-child{
    text-overflow: ellipsis;
}

/*the follwing is suboptimal but neccesary I think. I'd probably just make a sass mixin that I can feed a max number of lines to and have them avialable. Number of lines will need to be controlled by server or client template which is no worse than doing a character count clip server side now. */
.line2{
    text-indent: -100%;
}
.line3{
    text-indent: -200%;
}
.line4{
    text-indent: -300%;
}

HTML:

<p id="wrapper" class="redraw">
    <span class="text-block-line line1">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line2">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line3">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line4">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
</p>

Thêm chi tiết trong fiddle. Có một vấn đề với trình duyệt phản ánh rằng tôi sử dụng vẽ lại JS và vì vậy hãy kiểm tra nó nhưng đây là khái niệm cơ bản. Bất kỳ suy nghĩ / đề xuất được nhiều đánh giá cao.

cảm ơn @balpha và @Kevin, tôi kết hợp hai phương pháp với nhau.

không có js cần thiết trong phương pháp này.

bạn có thể sử dụng background-imagevà không cần gradient để ẩn dấu chấm.

các innerHTMLcủa .ellipsis-placeholderlà không cần thiết, tôi sử dụng .ellipsis-placeholderđể giữ cùng một chiều rộng và chiều cao với .ellipsis-more. Bạn có thể sử dụng display: inline-blockthay thế.

.ellipsis {
    overflow: hidden;
    position: relative;
}
.ellipsis-more-top {/*push down .ellipsis-more*/
    content: "";
    float: left;
    width: 5px;
}
.ellipsis-text-container {
    float: right;
    width: 100%;
    margin-left: -5px;
}
.ellipsis-more-container {
    float: right;
    position: relative;
    left: 100%;
    width: 5px;
    margin-left: -5px;
    border-right: solid 5px transparent;
    white-space: nowrap;
}
.ellipsis-placeholder {/*keep text around ,keep it transparent ,keep same width and height as .ellipsis-more*/
    float: right;
    clear: right;
    color: transparent;
}
.ellipsis-placeholder-top {/*push down .ellipsis-placeholder*/
    float: right;
    width: 0;
}
.ellipsis-more {/*ellipsis things here*/
    float: right;
}
.ellipsis-height {/*the total height*/
    height: 3.6em;
}
.ellipsis-line-height {/*the line-height*/
    line-height: 1.2;
}
.ellipsis-margin-top {/*one line height*/
    margin-top: -1.2em;
}
.ellipsis-text {
    word-break: break-all;
}

<div class="ellipsis ellipsis-height ellipsis-line-height">
    <div class="ellipsis-more-top ellipsis-height"></div>
    <div class="ellipsis-text-container">
        <div class="ellipsis-placeholder-top ellipsis-height ellipsis-margin-top"></div>
        <div class="ellipsis-placeholder">
           <span>...</span><span>more</span>
        </div>
        <span class="ellipsis-text">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </span>
    </div>
    <div class="ellipsis-more-container ellipsis-margin-top">
        <div class="ellipsis-more">
            <span>...</span><span>more</span>
        </div>
    </div>
</div>

jsfiddler

giải pháp javascript sẽ tốt hơn

• lấy số dòng văn bản
• chuyển đổi is-ellipsislớp nếu cửa sổ thay đổi kích thước hoặc thay đổi

getRowRects

Element.getClientRects()hoạt động như thế này

mỗi rects trong cùng một hàng có cùng một topgiá trị, vì vậy hãy tìm ra các rects có topgiá trị khác nhau , như thế này

function getRowRects(element) {
    var rects = [],
        clientRects = element.getClientRects(),
        len = clientRects.length,
        clientRect, top, rectsLen, rect, i;

    for(i=0; i<len; i++) {
        has = false;
        rectsLen = rects.length;
        clientRect = clientRects[i];
        top = clientRect.top;
        while(rectsLen--) {
            rect = rects[rectsLen];
            if (rect.top == top) {
                has = true;
                break;
            }
        }
        if(has) {
            rect.right = rect.right > clientRect.right ? rect.right : clientRect.right;
            rect.width = rect.right - rect.left;
        }
        else {
            rects.push({
                top: clientRect.top,
                right: clientRect.right,
                bottom: clientRect.bottom,
                left: clientRect.left,
                width: clientRect.width,
                height: clientRect.height
            });
        }
    }
    return rects;
}

Phao nổi ...more

như thế này

phát hiện thay đổi kích thước cửa sổ hoặc phần tử thay đổi

như thế này

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical; 

xem thêm bấm vào đây

một phương pháp css thuần túy dựa trên -webkit-line-Kẹp:

@-webkit-keyframes ellipsis {/*for test*/
    0% { width: 622px }
    50% { width: 311px }
    100% { width: 622px }
}
.ellipsis {
    max-height: 40px;/* h*n */
    overflow: hidden;
    background: #eee;

    -webkit-animation: ellipsis ease 5s infinite;/*for test*/
    /**
    overflow: visible;
    /**/
}
.ellipsis .content {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    font-size: 50px;/* w */
    line-height: 20px;/* line-height h */
    color: transparent;
    -webkit-line-clamp: 2;/* max row number n */
    vertical-align: top;
}
.ellipsis .text {
    display: inline;
    vertical-align: top;
    font-size: 14px;
    color: #000;
}
.ellipsis .overlay {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /**
    overflow: visible;
    left: 0;
    background: rgba(0,0,0,.5);
    /**/
}
.ellipsis .overlay:before {
    content: "";
    display: block;
    float: left;
    width: 50%;
    height: 100%;

    /**
    background: lightgreen;
    /**/
}
.ellipsis .placeholder {
    float: left;
    width: 50%;
    height: 40px;/* h*n */

    /**
    background: lightblue;
    /**/
}
.ellipsis .more {
    position: relative;
    top: -20px;/* -h */
    left: -50px;/* -w */
    float: left;
    color: #000;
    width: 50px;/* width of the .more w */
    height: 20px;/* h */
    font-size: 14px;

    /**
    top: 0;
    left: 0;
    background: orange;
    /**/
}

<div class='ellipsis'>
    <div class='content'>
        <div class='text'>text text text text text text text text text text text text text text text text text text text text text </div>
        <div class='overlay'>
            <div class='placeholder'></div>
            <div class='more'>...more</div>
        </div>
    </div>
</div>

Tôi đã tìm thấy một thủ thuật javascript, nhưng bạn phải sử dụng độ dài của chuỗi. Hãy nói rằng bạn muốn 3 dòng có chiều rộng 250px, bạn có thể tính độ dài cho mỗi dòng tức là

//get the total character length.
//Haha this might vary if you have a text with lots of "i" vs "w"
var totalLength = (width / yourFontSize) * yourNumberOfLines

//then ellipsify
function shorten(text, totalLength) {
    var ret = text;
    if (ret.length > totalLength) {
        ret = ret.substr(0, totalLength-3) + "...";
    }
    return ret;
}