Скрыть последний символ в DIV, если последний символ не отображается полностью

Question

У меня есть DIV, который имеет строку текста, как это:

<div style="overflow: hidden; height: 20px; white-space: nowrap; width: 27px; font-size: 14px"> 
 
    HHHAASDAS 
 
</div>

DIV имеет ширину 27px , и скрывает лишние символы overflow: hidden и white-space: nowrap.

В этом примере на дисплее последнего символа отображается A. Однако, A не отображался полностью, я могу видеть только половину этого символа. Как я могу скрыть последний символ, если последний символ не отображается полностью?

Answer 1

1. Использование CSS word-wrap свойство, чтобы разрывать строки в пределах слов.
2. Используйте line-height, равный высоте, чтобы следующая строка начиналась за пределами видимой области.
3. Используйте JavaScript/jQuery, чтобы заменить все пробелы неразрывными пробелами.

$(function() { 
 
    $(".test").text(function(i, text) { 
 
    return text.replace(/\s+/g, "\u00A0"); 
 
    }); 
 
});

.test { 
 
    font-size: 14px; 
 
    overflow: hidden; 
 
    width: 27px; 
 
    height: 20px; 
 
    line-height: 20px; 
 
    word-wrap: break-word; 
 
}

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

 
<div class="test">HHHAASDAS</div> 
 
<div class="test">H HHAA SDAS</div>

Answer 2

Попробуйте это ..

<div style="overflow: hidden; height: 20px; white-space: nowrap; width: 27px; font-size: 14px"> 
    HHHAASDAS 
</div> 
<p class="result"></p> 

    var myString = $.trim($("div").html()); 
    var lastString = myString.slice(0, -1); 
    alert(lastString); 
    $(".result").html(lastString); 

Demohttp://jsfiddle.net/en1tcguj/3/

Answer 3

text-overflow: ellipsis; работает как это

если HHHAASDAS не подходит compleatle, то он будет desplayed, как

HHA ...

<div style="overflow:hidden; text-overflow: ellipsis; height: 20px; white-space: nowrap; width: 27px; font-size: 14px"> 
 
    HHHAASDAS 
 
</div>