溢出:末尾隐藏的圆点

假设我有一个字符串“我喜欢大屁股，我不能说谎”，我用overflow:hidden来切割它，所以它会显示这样的东西:

我喜欢大屁股，我可以

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

我喜欢大屁股，我可以…

使用CSS呢?

当前回答

是的，通过css3中的text-overflow属性。注意:它还没有被浏览器普遍支持。

2009-01-28 05:29:31

其他回答

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

2015-04-21 09:24:28

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

2019-11-12 06:55:13

检查下面的代码片段来解决您的问题

div { 宽度:100px; 溢出:隐藏; 显示:inline-block; 文本溢出:省略; 空白:nowrap;} ｝ < div > 前曼哈顿警察鲍里斯·帕什上校 < / div >

2015-03-30 12:16:19

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

示例:我有一个有很多列的表。其中大多数是窄的(静态宽度)。但主列应该尽可能宽(取决于屏幕大小)。

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

2016-01-15 11:32:50

在引导程序4中，可以添加.text-truncate类来用省略号截断文本。

< script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> <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 " > < /脚本> <！——内联级别——> <span class=" font - family:宋体" style=" font - family:宋体;"> 我喜欢大屁股，我不会撒谎 < / span >

2018-09-06 02:09:58

溢出:末尾隐藏的圆点

推荐文章

最新文章

标签