Html 溢出：末尾隐藏点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/486563/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overflow:hidden dots at the end
提问by mannicken
Let's say I have a string "I like big butts and I cannot lie" and I cut it with overflow:hidden, so it displays something like this:
假设我有一个字符串“我喜欢大屁股，我不能说谎”，我用 剪断它overflow:hidden，所以它显示如下：
I like big butts and I cann
我喜欢大屁股而且我能
cutting off the text. Is it possible to display this like this:
切断文本。是否可以这样显示：
I like big butts and I cann...
我喜欢大屁股，我不能...
using CSS?
使用CSS？
回答by Joe Phillips
You can use text-overflow: ellipsis;which according to caniuseis supported by all the major browsers.
您可以使用文本溢出：省略号；其根据caniuse被所有主流浏览器的支持。
Here's a demoon 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>回答by Arjun
Check the following snippet for your problem
检查以下代码段是否存在您的问题
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>回答by Nagendra Matala
Try this if you want to restrict the lines up to 3 and after three lines the dots will appear. If we want to increase the lines just change the -webkit-line-clamp value and give the width for div size.
如果您想将行限制为最多 3 行，并且在三行之后会出现点，请尝试此操作。如果我们想增加线条，只需更改 -webkit-line-clamp 值并给出 div 大小的宽度。
div {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
回答by Vu Phan
Hopefully it's helpful for you:
希望对你有帮助：
.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>回答by ceejayoz
Yes, via the text-overflowproperty in CSS 3. Caveat: it is not universally supported yet in browsers.
是的，通过text-overflowCSS 3 中的属性。警告：浏览器尚未普遍支持它。
回答by Penny Liu
In bootstrap 4, you can add a .text-truncateclass to truncate the text with an 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>回答by Cuteboy_Max
<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>
回答by Maju
Most of solutions use static width here. But it can be sometimes wrong for some reasons.
大多数解决方案在这里使用静态宽度。但有时由于某些原因它可能是错误的。
Example: I had table with many columns. Most of them are narrow (static width). But the main column should be as wide as possible (depends on screen size).
示例：我有很多列的表。它们中的大多数都很窄（静态宽度）。但是主栏应该尽可能宽（取决于屏幕尺寸）。
HTML:
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:
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;
}
回答by manoj patel
<!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>
回答by Rohit Parte
hide text on load and show on hover
在加载时隐藏文本并在悬停时显示
<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;
}
