Question

我正在尝试制作一个只显示部分描述的描述框。我希望用户能够单击按钮以显示其余描述。

考虑到不同的设备尺寸，我不能在一定数量的字符后关闭文本。我希望文本显示在屏幕的整个宽度上并被切断。

我把CSS类“white-space：nowrap”放到了我的div上，它创建了文本没有换行，但现在它完全超出了div。

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

如果我可以让我的div只是在文本到达div的末尾时关闭文本我认为我应该没问题。

我如何基本上告诉我的div; “嘿，只在一行显示这个描述，如果它更长，那就把它剪掉。”

Answer 1

这里是如何根据元素的宽度在一行中剪切文本：

＆＃13;

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

＆＃13;

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;  
  }

p.expanded {
  text-overflow: initial;
  white-space: initial;
}

p.expanded+button { display: none; }

＆＃13;

<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>

＆＃13;

Answer 2

添加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>

Answer 3

将这些样式用于段落。这是你所期待的

.p {
  text-overflow: ellipsis;

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

停止自动换行

3 个答案: