Joe*_*ips 242
你可以使用文本溢出:省略号; 其根据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>Arj*_*jun 82
请检查以下代码段以查找您的问题
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>cee*_*yoz 14
是的,通过text-overflowCSS 3中的属性.告诫:它在浏览器中尚未得到普遍支持.
Nag*_*ala 12
如果要将线条限制为最多3次,并在三行之后出现点,请尝试此操作.如果我们想要增加行,只需更改-webkit-line-clamp值并给出div大小的宽度.
div {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
Vu *_*han 11
希望它对您有所帮助:
.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>在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><!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>
小智 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>
小智 6
.cut-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
大多数解决方案在这里都使用静态宽度。但有时由于某些原因它可能是错误的。
示例：我有一个包含很多列的表。它们大多数都很窄（静态宽度）。但主栏应尽可能宽（取决于屏幕尺寸）。
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;
}
在加载时隐藏文本并在悬停时显示
.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>| 归档时间： |
|
| 查看次数： |
244654 次 |
| 最近记录： |