javascript - Bagaimana untuk memaparkan teks dalam satu baris dan menggantikannya dengan... jika ia melebihi bilangan perkataan?
大家讲道理
大家讲道理 2017-05-19 10:13:23
0
7
901

Seperti dalam tajuk, lebar tetap, jika melebihi bilangan perkataan, gunakan...

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

membalas semua(7)
迷茫
overflow:hidden;white-space:nowrap;text-overflow:ellipsis;

overflow:hidden:超出隐藏
white-space:nowrap:强制不换行
text-overflow:ellipsis:超出省略号代替;

Portal, pergi semaknya

为情所困

Pendekatan tetap memerlukan empat syarat berikut:
1. Lebar tetap
2.overflow:hidden
3.white-space:nowrap
4.text-overflow:ellipsis

小葫芦
 display: -webkit-box;
    box-orient: vertical;
    line-clamp: 3; // 可控制几行后有 ... 
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; // 兼容写法
    overflow: hidden;
    white-space:normal;
阿神

Pertama sekali, titik pertama ialah garisan perlu diberi lebar tetap Walaupun lebarnya tidak diberikan, garisan perlu dihadkan secara terang-terangan, ia adalah untuk memberikan garisan tetap lebar. . .
Kod lain adalah seperti berikut

如果是一个p标签
p{
    width:100px;//固定宽度
    overflow:hidden;//超出隐藏
    white-space:nowrap;//不换行
    text-overflow:ellipsis;//省略号
}
仅有的幸福

/a/11...
Dua kaedah pelaksanaan, lebar tetap, paparan berlebihan..., tuding tetikus untuk meninggalkan kandungan

巴扎黑
// line-clamp、line-height和height直接控制多行
.two-line {
    color: #333;
    line-height: 18px;
    height: 36px;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    display: -moz-box;
    -webkit-line-clamp: 2;
    -moz-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
  }
我想大声告诉你

Dengan lebar tetap, gunakan overflow:hidden;text-overflow:ellipsis;white-space:nowrap;

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!