css – 仅显示字符串的最后部分

2023年12月25日 256次阅读

如何只显示字符串的最后一部分,如果它超过我的div宽度没有换行符？

例如. “…字符串”而不是

This is my
very large string

UPD：
This解决方案有效,但当我有一个大词时,例如url http：// myhost / path / foo / bar？和= some& params =只显示符号的一部分,不好.有任何想法吗？

最佳答案 你可以用方向做到这一点：rtl;但它无法在Chrome中运行

div {
  white-space: nowrap; 
  padding: 0 10px;
  width: 50px; 
  overflow: hidden;
  text-overflow: ellipsis; 
  border: 1px solid #000000;
  direction: rtl;
}
<div>This is my
very large string</div>

或者您可以使用JQuery并从文本中取出最后一个单词,p的宽度也将是动态的,并调整为最后一个单词的宽度.

var part = $('p').text().split(' ');
$('p').text('... '+part[part.length-1]);
p {
  white-space: nowrap; 
  padding: 0 10px;
  overflow: hidden;
  display: inline-block;
  border: 1px solid #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This is my
very large string</p>
点赞