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

时间:3个月前   阅读:97
<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>


上一篇:html代码|关闭某个标签某个层

下一篇:基础的讲解一下网站流动布局和自适应的问题

网友评论