html代码|文字过长显示变成省略号（html 文字过长省略）

<div style="width: 120px; height: 50px; border: 1px solid blue;overflow: hidden; text-overflow:ellipsis">

<nobr>就是比如有一行文字，很长，表格内一行显示不下.</nobr>

</div>

主要的操作在DIV的 数字上面，尝试修改，可以获得更多玩法

另外一种直接放在标签内的，只显示一行

style="width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"

另外一种是CSS

<p class="zshao">html代码|文字过长显示变成省略号_片段代码_zshao网络工作室|html代码|文字过长显示.
变成省略号_片段代码_zshao网络工作室|html代码|文字过长显示变成省略号_片段代码_zshao网络工作室</p>

<style>
.zshao{
  position:relative;
  line-height:1.4em;
  height:2.8em;
  overflow:hidden;
  width:130px;
  background-color: orange;
}
.zshao::after{
  content:"...";
  font-weight:bold;
  position:absolute;
  bottom:0;
  right:0;
  padding-left:20px;
  background: -webkit-linear-gradient(left, transparent, #fff 62%);
  background: -o-linear-gradient(right, transparent, #fff 62%);
  background: -moz-linear-gradient(right, transparent, #fff 62%);
  background: linear-gradient(to right, transparent, #fff 62%);
}

</style>