Question

我有一个div，其中包含一行文字：

＆＃13;

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

＆＃13;

div的宽度为27px，并按overflow: hidden和white-space: nowrap隐藏多余的字符。

在此示例中，屏幕上显示的最后一个字符为A。但是，A没有完全显示，我只能看到这个角色的一半。如果最后一个字符没有完全显示，我怎样才能隐藏最后一个字符？

Answer 1

试试这个..

<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);

<强>演示 http://jsfiddle.net/en1tcguj/3/

Answer 2

text-overflow: ellipsis; 像这样工作

如果HHHAASDAS不适合完成，那么它将被显示为

... HHA

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

Answer 3

使用CSS word-wrap属性允许单词中的断行。
使用等于高度的line-height，以便下一行从可见区域外开始。
使用JavaScript / jQuery将所有空格替换为不间断的空格。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果最后一个字符未完全显示，则隐藏div中的最后一个字符

3 个答案: