jquery - 文本溢出省略和展开不起作用

Question

我这里有一个简单的代码:

$(".container article").click(function() {
  $(this).toggleClass("expand");
})

.container {
  width: 100%;
}

.container article {
  height: 15px;
  overflow: hidden;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  display: block;
  overflow: hidden;
  word-break: break-word;
  word-wrap: break-word;
  background-color: #5E585B;
  color: white;
  font-family: sans-serif;
  font-size: 12px;
  font-weight: bold;
  padding-left: 5px;
  padding-top: 1px;
  text-overflow: ellipsis;
}

.container article.expand {
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <article class="text">
    text text text
  </article>
</div>

http://jsfiddle.net/SqJ53/262/

我需要动态宽度和高度，但省略号不起作用。 在不改变宽度和高度的情况下，你们有什么想法吗？ 我尝试设置空白:nowrap。它显示省略号，但当我单击容器时删除展开效果。

Answer 1

我相信这可以满足您的需要。 CSS 已记录。 有关 text-overflow 及其要求的更多信息 here

$(".container article").click(function() {
  $(this).toggleClass("expand");
})

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
}

.container article {
  height: 15px;
  overflow: hidden;
  transition: all .5s ease-in-out;
  display: block;
  word-break: break-word;
  word-wrap: break-word;
  background-color: #5E585B;
  color: white;
  font-family: sans-serif;
  font-size: 12px;
  font-weight: bold;
  padding-left: 5px;
  padding-top: 1px;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Added. This is required for ellipsis */
}

.container article.expand {
  height: auto;
  overflow: auto;
  /* Added to reset */
  white-space: initial;
  /* Added to reset */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <article class="ITDS">
    MCKY CONT MNGD ITEM MCKY CONT MNGD ITEM MCKY CONT MNGD ITEM MCKY CONT MNGD ITEM MCKY CONT MNGD ITEM MCKY CONT MNGD ITEM MCKY CONT MNGD ITEM MCKY CONT MNGD ITEM MCKY CONT MNGD ITEM MCKY CONT MNGD ITEM MCKY CONT MNGD ITEM MCKY CONT MNGD ITEM MCKY CONT MNGD
    ITEM MCKY CONT MNGD ITEM MCKY CONT MNGD ITEM MCKY CONT MNGD ITEM MCKY CONT MNGD ITEM MCKY CONT MNGD ITEM MCKY CONT MNGD ITEM MCKY CONT MNGD ITEM MCKY CONT MNGD ITEM MCKY CONT MNGD ITEM MCKY CONT MNGD ITEM MCKY CONT MNGD ITEM
  </article>
</div>