停止單詞包裝

我想製作一個只顯示部分描述的描述框。我希望用戶能夠點擊按鈕來顯示其餘的描述。停止單詞包裝

爲了說明不同的設備尺寸，我不能在一定數量的字符之後關閉文本。我希望文本顯示整個屏幕寬度並切斷。

我已經把CSS類「white-space：nowrap」放到了我的div上，這使得文本不能包裝，但現在它完全脫離了div。

<div class="col"><p style="white-space: nowrap; font-size:12pt">{{description}}</p></div>

如果我能讓我的div只是關閉文本，如果它到達div的末尾我認爲我應該沒問題。

我如何基本告訴我的div; 「嘿，只在一行上顯示這個描述，如果它更長，那就把它關掉。」

來源

2017-02-13 MatTaNg

下面介紹如何剪切文本關在一個單一的線，基於元素的寬度：

document.querySelector('button').addEventListener('click',function() { 
 
    document.querySelector('p').classList.toggle('expanded'); 
 
});

p { 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    } 
 

 
p.expanded { 
 
    text-overflow: initial; 
 
    white-space: initial; 
 
} 
 

 
p.expanded+button { display: none; }

<p>n vitae aliquet mi. Aliquam imperdiet orci ipsum, vel facilisis quam venenatis a. Donec rhoncus lectus sit amet fringilla accumsan. Vivamus convallis risus eu porta porta. Aenean blandit varius ultrices. Integer metus tellus, tristique ac cursus quis, tempor sit amet turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam accumsan laoreet orci eget fringilla. Maecenas ac imperdiet orci. Morbi imperdiet accumsan augue nec ultrices. Donec arcu felis, molestie a metus in, feugiat molestie libero. In sit amet odio ut neque posuere ultrices eu at felis. Donec et bibendum ligula, at varius massa. In velit neque, egestas in velit venenatis, sagittis ornare odio.</p> 
 
<button>More...</button>

來源

2017-02-13 00:13:13 Adam

哇完美謝謝你！ – MatTaNg

如果文本沒有溢出，我想隱藏按鈕。任何想法如何做到這一點？ – MatTaNg

@MatTaNg - 請參閱編輯的片段。你使用的確切代碼會有所不同，但主要的外觀基本上是使用兄弟CSS選擇器（'+'） – Adam

添加overflow: hidden;：

<div class="col"><p style="white-space: nowrap; font-size:12pt; overflow: hidden;">Bla blablablablablablablablablablab blablabla blabla blablabla blabla bla ablablablablab blablabla blabla blablabla blabla bla ablablablablab blablabla blabla blablabla blabla bla ablablablablab blablabla blabla blablabla blabla bla</p></div>

來源

2017-02-13 00:22:50 Johannes

在段落中使用這些樣式。這是你所期望的

.p { 
    text-overflow: ellipsis; 

    /* Required for text-overflow to do anything */ 
    white-space: nowrap; 
    overflow: hidden; 
}

來源

2017-02-13 00:25:36 TRiNE

停止單詞包裝

回答

相關問題