相关疑难解决方法(0)

我不知道为什么这个简单的CSS不起作用......

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

应该在4号"测试"周围切断

我有一个固定高度的div overflow:hidden;

我想用jQuery检查div是否有溢出超过div的固定高度的元素.我怎样才能做到这一点？

如何检测div元素中的垂直文本溢出？

CSS:

div.rounded {
   background-color:#FFF;
   height: 123px;
   width:200px;
   font-size:11px;
   overflow:hidden;
}

HTML:

<div id="tempDiv" class="rounded">
    Lorem ipsum dolor sit amet,
    consectetur     adipiscing elit. Phasellus vel quam vestibulum orci blandit laoreet. 
</div>

请看下面的小提琴https://jsfiddle.net/27x7rvx6

CSS(#test是flexbox容器,.items是它的子容器):

#test {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  width: 300px;
  margin-left: 150px;
  border: 2px solid red;  
}
.item {
  flex: 0 0 70px;
  margin-right: 10px;
  background: blue;
  height: 70px;
  border: 2px solid black;
}

有一个nowrap带有固定大小项目的line()flexbox.容器已justify-content设置为center.因为物品不能收缩并且比容器更宽,所以它们开始溢出.

我的问题是内容溢出到左侧和右侧.有没有办法让内容合理化为中心,但一旦它开始溢出使其行为就像justify-content属性设置为flex-start,resp.使它只溢出到容器的右边？

[更新]与这个问题的不同之处在于，它不仅要求文本被截断，还要求文本被截断。正如我所提到的，我已经使用这种方法将文本截断了。而是询问仅在文本被截断时才具有“阅读更多”链接（仅在可能的情况下使用CSS）。

目前，我正在使用这种方法在文本溢出时（当文本不能容纳在一行中时）生成省略号。但是，现在我还想在发生溢出时在行的末尾添加一个“阅读更多”链接，单击该链接将在多行中显示所有内容。这仅适用于CSS吗？

顺便说一句，我看到了这篇文章，无论文本是否溢出，它都会显示“更多”链接，这不是我想要的。

我猜想最后一种方法是将JavaScript与resize()侦听器一起使用，以动态隐藏文本的溢出部分并创建链接以显示它们。

谢谢！