让一段文字不换行且超出宽度显示三个点 ...【推荐】

菜鸟0201

已于 2023-02-03 09:18:50 修改

阅读量606

点赞数

分类专栏： CSS 文章标签： css

于 2021-03-16 17:32:10 首次发布

本文链接：https://blog.csdn.net/weixin_43475142/article/details/114890463

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<div class="box">
    <div class="content">君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。今朝有酒今朝醉，千金散尽还复来。</div>
</div>

<style type="text/css">
  .box{
    width: 300px;
    height: 600px;
    border: 1px solid black;
  }
  /* 最重要的代码块：外层固定宽度，内容就直接写这个，即可达到效果 */
  .content{
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
  }
</style>