Question

我有一个中心对齐的文字，由于某些操作而改变。我可以在那里过渡吗？（codepen）

HTML：

<div id="container">Lorem ipsum dolor sit amet consectetur adipiscing elit</div>

CSS：

#container {
  width: 400px;
  height: 20px;
  background: #000;
  color: white;
  text-align: center;
}

（上面的codepen是动态数据的一个示例，实际上，我的数据正在被反应状态改变）

编辑：只有文字的最后一部分更改为Lorem ipsum dolor sit amet consectetur adipiscing elit更改为Lorem ipsum dolor ...。所以我想显示从左边开始的缩小文本（因为剩下的文本将在切断时留在左侧）

Answer 1

像这样的东西

＆＃13;

$("#container div").hover(function() {
  this.innerHTML = "This is some sample dynamic text This is some sample dynamic text This is some sample dynamic text This is some sample dynamic text This is some sample dynamic text This is some sample dynamic text This is some sample dynamic text This is some sample dynamic text This is some sample dynamic text This is some sample dynamic text This is some sample dynamic text";
}, function() {
  this.innerHTML = "This is some sample dynamic text that does nothing This is some sample dynamic text that does nothing This is some sample dynamic text that does nothing";
});

＆＃13;

#container {
  height: 20px;
  background: #000;
  color: white;
  text-align: center;
}
#container div {
  width: 400px;
  white-space: nowrap;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  transition: all ease-in-out .9s;
}
#container div:hover {
  width: 100%;
  max-width: 100%;
  white-space: normal;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div>This is some sample dynamic text that does nothing This is some sample dynamic text that does nothing This is some sample dynamic text that does nothing</div>
</div>

＆＃13;

Answer 2

#container:after{
   content:'this is dynamic';
}

或者，在JavaScript中：

document.getElementById("container").innerHTML = "Paragraph changed!"

Answer 3

这是一个仅使用CSS的简单过渡，同样，您可以根据自己的意愿获得大量效果.....无需使用JS。

#container {
  width: 100%;
  height: 20px;
  background: #000;
  color: white;
  position: relative;
}
#container:hover > .static {
  top: -20px;
}
#container:hover > .dynamic {
  top: 0px;
}
#container .static {
  top: 0px;
}
#container .dynamic {
  top: 20px;
}
#container > div {
  position: absolute;
  left: auto;
  right: auto;
  width: 100%;
  text-align: center;
  transition: all 0.3s linear;
  overflow-y: hidden;
}

<div id="container">
  <div class="static">This is some sample dynamic text that does nothing</div>
  <div class="dynamic">This is some sample dynamic text</div>
</div>

如何转换中心对齐的动态文本？

3 个答案: