文字中的省略号（Mac 风格）

function applyMidOverflow(el, delimiter) {
    if (delimiter === undefined || 
        Number.isInteger(delimiter)  // forEach index
       ) {
        var cs = getComputedStyle(el);     
        if (cs.textOverflow === 'ellipsis' || cs.textOverflow === '') {
            delimiter = '…';
        } else {
            // remove quotes
            delimiter = s.textOverflow.substring(1, s.textOverflow.length - 1)
        }
    }
    var r = el.getBoundingClientRect();
    var half_width_pos = r.x + (r.width/2);    
    if (el.childNodes.length !== 1 || el.childNodes[0].nodeType !== 3) {
        console.warn('midOverflow: need a single TEXT_NODE child', el);
        return;
    }    
    const textChild = el.childNodes[0];
    var range = document.createRange();    
    var end = textChild.textContent.length;

    // set the following to zero to be sure
    var approx_mid = Math.round(end * 0.4);

    for (var i = approx_mid; i < end; i++) {
        // TODO: binary search
        range.setStart(textChild, i);
        range.setEnd(textChild, end);
        // not getBoundingClientRect as word could wrap
        var rects = range.getClientRects();
        var selected_t = Array.from(rects, (r)=>r.width).reduce((a, b)=>a+b, 0);
        if (selected_t < half_width_pos) {
            break;   
        }        
    }   
    el.style.textOverflow = '" ' + delimiter + ' ' + textChild.textContent.substring(i).replace(/"/, '\\"').replace('\n', '').replace(/\s+$/g, '') + '"';
}

addEventListener('load', () => {
    document.querySelectorAll('.overflow-mid').forEach(applyMidOverflow);    
});

.overflow-mid {
  overflow: hidden;
  text-overflow: ellipsis; /* will be overwritten */
  white-space: nowrap;
  height: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="resize:both;overflow:auto;width:75%">

<div class="overflow-mid">Multi line ipsum dolor amet meatball bresaola t-bone tri-tip brisket. Jowl pig picanha cupim landjaeger, frankfurter spare ribs chicken. Porchetta jowl panhttps://jsfiddle.net/amvebozn/2/#runcetta drumstick shankle cow spare ribs jerky tail kevin biltong capicola brisket venison bresaola. Flank sirloin jowl andouille meatball venison salami ground round rump boudin turkey capicola t-bone. Sirloin filet mignon tenderloin beef, biltong doner bresaola brisket shoulder pork loin shankle turducken shank cow. Ragged end of multi line.
</div>    

<div class="overflow-mid">"The true sign of intelligence is not knowledge but imagination."</div>
<br>
<div class="overflow-mid">"Albert Einstein likely didn't utter the majority of the many quotes that are attributed to him."</div>
<div class="overflow-mid">"You can't blame gravity for falling in love."</div>

</div>

https://jsfiddle.net/amvebozn/5/

function truncateMiddle(word) {
    const tooLongChars = 15; // arbitrary

    if (word.length < tooLongChars) {
        return word;
    }

    const ellipsis = '...';
    const charsOnEitherSide = Math.floor(tooLongChars / 2) - ellipsis.length;

    return word.slice(0, charsOnEitherSide) + ellipsis + word.slice(-charsOnEitherSide);
}

function truncate(text, textLimit) {
    if (!text) return text;
    if (textLimit < 1) return string;
    if (text.length < textLimit) return text;
    if (textLimit === 1) return text.substring(0,1) + '...';
    /* extract the last word */
    var lastPart = text.slice( string.lastIndexOf(' ')+1 );
    /* if last word is longer then a third of the max available space
       cut it from the left */
    var lastPartLimit = Math.ceil(textLimit / 3);
    if(lastPart.length > lastPartLimit) {
        var truncatedLastPart = lastPart;
        /* Try to find a dash and cut the last word there */
        var lastDashPart = text.slice( text.lastIndexOf('-')+1 );
        if(lastDashPart.length < lastPartLimit){
            truncatedLastPart = lastDashPart;
        }
        /* If the last part is still to long or not available cut it anyway */
        if(truncatedLastPart.length > lastPartLimit) {
            var lastIndex = lastPart.length - lastPartLimit;
            truncatedLastPart = lastPart.substring( lastIndex );
        }
        lastPart = truncatedLastPart;
    }
    var dots = '... ';
    var firsPartLength = textLimit - lastPart.length - dots.length;
    return text.substring(0, firstPartLength) + dots + lastPart;
}

console.log( truncate("New York City", 10) ); // Ne... City (max of 10 characters)
console.log( truncate("New York Kindergarden", 14) ); // Ne...ergarden (max of 14 characters, last word gets cut from the left by a third)
console.log( truncate("New York Kinder-garden", 14) ); // Ne...garden (max of 14 characters, last word gets cut by the dash from the left)

这将使您对省略号和占位符文本的位置有更多的控制：

function ellipsis(str, maxLength, ellipsisLocationPercentage,placeholder) {
    /*
    ARGUMENTS:
    str - the string you want to maninpulate
    maxLength -  max number of characters allowed in return string
    ellipsisLocationPercentage (optional) - How far (percentage wise) into the return string you want the ellipses to be placed
        Examples:
        .85 : This is a very long string. This is a very long string. This is a very long string. This is a ver[...]very long string.
        .25 : This is a very long string. [...]g. This is a very long string. This is a very long string. This is a very long string.
    placeholder (optional) - this will be used to replace the removed substring. Suggestions : '...', '[..]', '[ ... ]', etc....
    */
    if(ellipsisLocationPercentage == null || isNaN(ellipsisLocationPercentage) || ellipsisLocationPercentage >= 1 || ellipsisLocationPercentage <= 0){
        //we've got null or bad data.. default to something fun, like 85% (that's fun, right??)
        ellipsisLocationPercentage = .85;
    }
    if(placeholder == null || placeholder ==""){
        placeholder = "[...]";
    }

    if (str.length > (maxLength-placeholder.length)) {
        //get the end of the string
        var beginning = str.substr(0, (maxLength - placeholder.length)*ellipsisLocationPercentage );
        var end = str.substr(str.length-(maxLength - placeholder.length) * (1-ellipsisLocationPercentage));
        return beginning + placeholder + end;
    }
    return str;
}

ellipsis("This is a very long string. Be Scared!!!!", 8);//uses default values
ellipsis("This is a very long string. Be Scared!!!!", 8,.5);//puts ellipsis at half way point
ellipsis("This is a very long string. Be Scared!!!!", 8,.75,'<..>');//puts ellipsis at 75% of the way into the string and uses '<..>' as the placeholder

//position acceptable values : middle, end, closeEnd
function AddElipsis(input, maxChars, position) {
    if (typeof input === 'undefined') {
        return "";
    }
    else if (input.length <= maxChars) {
        return input;
    }
    else {
        if (position == 'middle') {
            var midPos = Math.floor(maxChars / 2) - 2;
            return input.substr(0, midPos) + '...' + input.substr(input.length - midPos, input.length);
        }
        else if (position == 'closeEnd') {
            var firstPart = Math.floor(maxChars * 0.80) - 2;
            var endPart = Math.floor(maxChars * 0.20) - 2;
            return input.substr(0, firstPart) + '...' + input.substr(input.length - endPart, input.length);
        }
        else {
            return input.substr(0, maxChars - 3) + '...';
        }
    }
}

这是我的看法 - 一种仅在Firefox中可用的纯CSS解决方案：

div {
  width: 20em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-overflow: " … is also your text.";
}

<div>Here's the long string of letters that accidentally is also your text.</div>

如果您需要文本是动态的，可以直接在元素上指定第二个text-overflow声明。不支持此语法的浏览器（尤其是Chrome）将回退到普通的省略号。