css 纯CSS，PHP和JS用于省略省略的截断

Posted 2021-05-13

.something{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 2.4em;
}

$text = 'your long long text';
$maxPos = 100;
if (strlen($text) > $maxPos)
{
    $lastPos = ($maxPos - 3) - strlen($text);
    $text = substr($text, 0, strrpos($text, ' ', $lastPos)) . '...';
}

function ellipsizeTextBox(id) {
    var el = document.getElementById(id);
    var wordArray = el.innerHTML.split(' ');
    while(el.scrollHeight > el.offsetHeight) {
        wordArray.pop();
        el.innerHTML = wordArray.join(' ') + '...';
     }
}
ellipsizeTextBox(‘block-with-text);

.something {
    overflow: hidden;
    white-space: nowrap;
    padding: 3px 0;
    text-overflow: ellipsis;
}