溢出:末尾隐藏的圆点

假设我有一个字符串“我喜欢大屁股，我不会撒谎”，我用overflow:hidden切割它，所以它显示如下内容:

我喜欢大屁股，我可以

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

我喜欢大屁股，我可以…

使用CSS呢?

517355 次浏览
小开

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

小开

你可以使用文本溢出:省略;，而所有主流浏览器都支持根据caniuse的说法。

这里是jsbin上的一个演示。

.cut-text {
text-overflow: ellipsis;
overflow: hidden;
width: 160px;
height: 1.2em;
white-space: nowrap;
}
<div class="cut-text">
I like big butts and I can not lie.
</div>

小开

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

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>

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

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

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

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

如果你想把线条限制在3条以内，那么试试这个方法，在3条线之后，点就会出现。如果我们想增加线条，只需改变-webkit-line-clamp值，并给出div size的宽度。

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

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

小开

希望这对你有帮助:

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

小开

隐藏文本加载和显示悬停

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


span:hover {
white-space: unset;
text-overflow: unset;
}
<span class="hide-text"> How to hide text by dots and show text on hover</span>

小开 
<!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>
小开 
.cut-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

提交答案