停止单词包装

我想制作一个只显示部分描述的描述框。我希望用户能够点击按钮来显示其余的描述。停止单词包装

为了说明不同的设备尺寸，我不能在一定数量的字符之后关闭文本。我希望文本显示整个屏幕宽度并切断。

我已经把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

停止单词包装

回答

相关问题