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>

Answer 2

通过向文章提供:after并为CSS提供以下CSS类，您可以使用position:relative;实现文本溢出省略号：

.container article {
   position:relative;
}
.ITDS:after{
   content: "...";
   top: 0;
   right: 0;
   position: absolute;
}
.ITDS.expand:after{
   display:none;
}

Answer 3

添加white-space:nowrap并将分词属性保留在展开部分：

$(".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;
  background-color: #5E585B;
  color: white;
  font-family: sans-serif;
  font-size: 12px;
  font-weight: bold;
  padding-left: 5px;
  padding-top: 1px;
  white-space:nowrap;
  text-overflow: ellipsis;
}

.container article.expand {
  height: auto;
  word-break: break-word;
  word-wrap: break-word;
  white-space:normal;
}

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

文本溢出省略号和扩展名不起作用

3 个答案: