CSS、j's單行、多行文字溢位顯示省略號-html教學-PHP中文網

在專案中，由於實際描述文字過多，導致初始頁面縱向長度過長，也使得餘下資訊利用率降低；所以在文字過多的時候，初始化限制行數是有必要的

1. CSS單行文字溢出，顯示省略號

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
    我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出。
</span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

登入後複製

2. CSS多行文字溢出，顯示省略號

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
    我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本。
</span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

登入後複製

上面兩種適合標籤裡面只有文字的情況，有時我們會遇到這樣的情況

<span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>我是内容<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>我是内容<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>我是内容<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>我是内容<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

登入後複製

3. 第三種就是解決上面狀況遇到的問題

我在網路上看了很多例子，各有各的好，我使用的是給固定的line-height，換行也是每行在固定的的高度，如：line-height:20px;，每次換空行也要讓空行是20px，這樣我們就可以利用20的倍數來合理的顯示內容要顯示的行數和內容

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="text"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        你不想要改变世界，但是你想要看日出？想要体验下传说中的晨跑？想在晨跑中偶遇男神女神？想要看下早上5点图书馆或训练场是否有人？想呼吸下还没被汽车尾气过度渲染的空气？想给自己给爱人做个早餐？你得早起呀！昨晚事情没做完？考研单词还差几页？赶飞机、赶火车？你得早起呀！你不想上班也得早起请假不是嘛～
    </span><span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        欢迎大家参加早起的鸟儿有虫吃－21天早起计划。一日之计在于晨，在沐浴晨光的过程中，我们祝愿大家开始美好的一天！
    </span><span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="points"</span><span style="color: #0000ff;">></span>...<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

登入後複製

<span style="color: #800000;">.text</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">#707070</span>;<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">0 12px</span>;<span style="color: #ff0000;">position</span>:<span style="color: #0000ff;">relative</span>;<span style="color: #ff0000;">line-height</span>:<span style="color: #0000ff;">20px</span>;<span style="color: #ff0000;">overflow</span>:<span style="color: #0000ff;">hidden</span>;<span style="color: #ff0000;">
margin-bottom</span>:<span style="color: #0000ff;">12px</span>;<span style="color: #ff0000;">max-height</span>:<span style="color: #0000ff;">60px</span>;}<span style="color: #800000;">
.points</span>{<span style="color: #ff0000;">content</span>:<span style="color: #0000ff;">"..."</span>;<span style="color: #ff0000;">position</span>:<span style="color: #0000ff;">absolute</span>;<span style="color: #ff0000;">bottom</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">right</span>:<span style="color: #0000ff;">16px</span>;<span style="color: #ff0000;">padding-left</span>:<span style="color: #0000ff;">40px</span>;<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">18px</span>;<span style="color: #ff0000;">letter-spacing</span>:<span style="color: #0000ff;">3px</span>;<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;"> -webkit-linear-gradient(left, transparent, #fff 55%)</span>;<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;"> -o-linear-gradient(right, transparent, #fff 55%)</span>;<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;"> -moz-linear-gradient(right, transparent, #fff 55%)</span>;<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;"> linear-gradient(to right, transparent, #fff 55%)</span>;}<span style="color: #800000;">
.text p</span>{<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;">
.text p+p</span>{<span style="color: #ff0000;">margin-top</span>:<span style="color: #0000ff;">20px</span>;}

登入後複製

<span style="color: #008000;">//</span><span style="color: #008000;"> 字体显示</span>
    <span style="color: #0000ff;">var</span> showBoo = <span style="color: #0000ff;">true</span><span style="color: #000000;">;
    $(</span>'.de-box .text').on('click',<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
        </span><span style="color: #0000ff;">if</span><span style="color: #000000;">(showBoo){
            console.log(</span>1<span style="color: #000000;">);
            $(</span>'.de-box .text').css('maxHeight','none'<span style="color: #000000;">);
            $(</span>'.de-box .points'<span style="color: #000000;">).hide();
            showBoo </span>= <span style="color: #0000ff;">false</span><span style="color: #000000;">;
        }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{
            $(</span>'.de-box .text').css('maxHeight','60px'<span style="color: #000000;">);
            $(</span>'.de-box .points'<span style="color: #000000;">).show();
            showBoo </span>= <span style="color: #0000ff;">true</span><span style="color: #000000;">;
        };
    });</span>

登入後複製

這種情況會出現換行出現空白顯示的現象，這個問題先留著，今天有些累了