当前位置:  开发笔记 > 编程语言 > 正文

溢出:最后隐藏的点

如何解决《溢出:最后隐藏的点》经验,为你挑选了7个好方法。

假设我有一个字符串" 我喜欢大屁股而且我不能说谎 "而且我用它来剪切它overflow:hidden,所以它显示如下:

我喜欢大屁股,我喜欢

切断文字.是否可以像这样显示:

我喜欢大烟头,我喜欢......

用CSS?



1> Joe Phillips..:

你可以使用文本溢出:省略号; 其根据caniuse被所有主流浏览器的支持.

这是关于jsbin 的演示.

.cut-text { 
  text-overflow: ellipsis;
  overflow: hidden; 
  width: 160px; 
  height: 1.2em; 
  white-space: nowrap;
}
I like big buts and I can not lie.


2> Arjun..:

请检查以下代码段以查找您的问题

div{
  width : 100px;
  overflow:hidden;
  display:inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}
The Alsos Mission was an Allied unit formed to investigate Axis scientific developments, especially nuclear, chemical and biological weapons, as part of the Manhattan Project during World War II. Colonel Boris Pash, a former Manhattan P


3> ceejayoz..:

是的,通过text-overflowCSS 3中的属性.告诫:它在浏览器中尚未得到普遍支持.


截至2012年2月,浏览器支持现在相当不错.请参阅http://caniuse.com/#search=text-overflow

4> Nagendra Mat..:

如果要将线条限制为最多3次,并在三行之后出现点,请尝试此操作.如果我们想要增加行,只需更改-webkit-line-clamp值并给出div大小的宽度.

div {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}



5> 小智..:

希望它对您有所帮助:

.text-with-dots {
    display: block;
    max-width: 98%;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}
Some texts here Some texts here Some texts here Some texts here Some texts here Some texts here


6> Penny Liu..:

bootstrap 4中,您可以添加一个.text-truncate类以用省略号截断文本。







  I like big butts and I cannot lie


7> 小智..:

推荐阅读
贴进你的心聆听你的世界
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有