溢出：末端有隐藏点

205

假设我有一个字符串“ 我喜欢大屁股，但我不能撒谎 ”，然后用剪下overflow:hidden，所以它显示如下：

我喜欢大屁股，我不能

剪掉文字。是否可以这样显示：

我喜欢大屁股，我不能...

使用CSS？

html css

— 曼尼克
source

46

这个问题是宣传这首歌的借口吗？

— 西里尔·古塔

12

@CyrilGupta对不起，您的回复很晚。我不得不去洗手间。要回答您的问题...是的

— Joe Phillips 2014年

1

可能重复我怎么能显示与隐藏溢出跨度点（“...”）？

— Termininja '16

281

您可以使用文本溢出：省略号；其根据caniuse被所有主流浏览器的支持。

这是一个关于jsbin 的演示。

.cut-text { 
  text-overflow: ellipsis;
  overflow: hidden; 
  width: 160px; 
  height: 1.2em; 
  white-space: nowrap;
}

<div class="cut-text">
I like big buts and I can not lie.
</div>

展开摘要

— 乔·菲利普斯
source

这似乎在Firefox 15.0.1中有效：w3schools.com/cssref/tryit.asp?

— Jace

是的，它似乎可以在较新的版本中使用。显然，此答案已经存在了几年。

— 乔·菲利普斯

Firefox从2011

— 理查德·埃夫

1

我可以根据我的常识来判断，根据投票和评论，这个答案是“正确的”。但是，实际上我看不出这个答案是“正确的”。我同时使用overflow: hidden;，并text-overflow: ellipsis;在一个元素（即，一个块级元素），并没有发现...在结束（当然我确保它确实溢出）。我也试过这个没有overflow: hidden;组成部分，也是一个内部元素，其中元素元素有overflow: hidden;和有text-overflow: ellipsis;不管我如何努力，这是一个失败..

— VoidKing

2

好吧，我想我知道问题所在。我试图限制溢出的依据，max-height所以我不能white-space:设置为nowrap

— VoidKing 2013年

88

检查以下代码段以解决您的问题

div{
  width : 100px;
  overflow:hidden;
  display:inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

展开摘要

— Arjun
source

4

用于添加“空白：nowrap；” 在某些情况下可能需要使用

— leo

2

如何使文本显示2行然后消失？

— Martian2049'9

1

@ Matian2040，您可以通过提供固定的高度和溢出的隐藏样式进行调整，请检查此小提琴jsfiddle.net/5135L4bx

— Arjun

1

哦，我明白了。我试过了。但是似乎有两行表示最后没有...。

— Martian2049 '09

1

display: inline-block;对我来说是缺少的部分。谢谢。

— 赛斯

18

如果要将行数限制为最多3行，请在三行之后出现点。如果我们想增加行数，只需更改-webkit-line-clamp值并为div大小指定宽度即可。

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

— 纳根德拉·马塔拉（Nagendra Matala）
source

抱歉，我不确定我是如何删除您的话的！

— 亚历克

在Chrome上可正常使用，但请注意，在Firefox上将无法使用

— Ken Bigler

我如何在另一个浏览器（例如Firefox）上执行此操作？编辑：stackoverflow.com/questions/33058004/...

— user3187724

17

希望它对您有帮助：

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

<div class='text-with-dots'>Some texts here Some texts here Some texts here Some texts here Some texts here Some texts here </div>

展开摘要

— 武潘
source

15

是的，通过text-overflowCSS 3中的属性。警告：浏览器尚不普遍支持它。

— 塞贾约兹
source

3

截至2012年2月，现在浏览器的支持非常不错。请参见caniuse.com/#search=text-overflow

— Simon East

1

啊，这就是三年后出现此问题的原因。

— 李斯特先生，2012年

8

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 190px;">
  I like big butts and I cannot lie
</span>

展开摘要

— 刘佩妮
source

6

<style>
    .dots
    {
        display: inline-block;
        width: 325px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }

    .dot
    {
        display: inline-block;
        width: 185px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }
</style>

— 可爱男孩
source

3

大多数解决方案在这里使用静态宽度。但是由于某些原因有时可能是错误的。

示例：我的表有很多列。它们大多数是窄的（静态宽度）。但是主列应尽可能宽（取决于屏幕大小）。

HTML：

<table style="width: 100%">
  <tr>
    <td style="width: 60px;">narrow</td>
    <td>
      <span class="cutwrap" data-cutwrap="dynamic column can have really long text which can be wrapped on two rows, but we just need not wrapped texts using as much space as possible">
        dynamic column can have really long text which can be wrapped on two rows
        but we just need not wrapped texts using as much space as possible
      </span>
    </td>
  </tr>
</table>

CSS：

.cutwrap {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 18px;
  white-space: normal;
  color: transparent !important;
}
.cutwrap::selection {
  color: transparent !important;
}
.cutwrap:before {
  content: attr(data-cutwrap);
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}
/* different styles for links */
a.cutwrap:before {
  text-decoration: underline;
  color: #05c;
}

— 麻菊
source

3

<!DOCTYPE html>
<html>
<head>
<style>
.cardDetaileclips{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* after 3 line show ... */
    -webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div style="width:100px;">
  <div class="cardDetaileclips">
    My Name is Manoj and pleasure to help you.
  </div>
</div> 
</body>
</html>

— 马诺帕特尔
source

-1

在加载时隐藏文本并在悬停时显示

<span class="hide-text"> How to hide text by dots and show text on hover</span>

.hide-text {
    width: 70px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
  }

  span:hover {
     white-space: unset;
     text-overflow: unset;
  }

— 罗希特·帕特
source