css怎么设置一行字显示不完隐藏?

css怎么设置一行字显示不完时隐藏其余内容?下面本篇文章给大家介绍一下使用css设置一行字显示不完隐藏的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

css设置一行字显示不完隐藏的方法

在CSS中,可以利用overflow属性,使用overflow:hidden来设置溢出隐藏。

代码:

<!DOCTYPE html>
<html>
  <head>
        <meta charset="utf-8">
        <style>
            .gdou{
                width:200px;
                height:30px;
                background:pink;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
        </style>
  </head>
    <body>
        <div class='gdou'>
            这一行很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的。
        </div>
  </body>
</html>

效果图:

1.png

overflow属性

overflow属性规定当内容溢出元素框时发生的事情。

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。

说明:所有主流浏览器都支持 overflow 属性。

可能的值

  • visible:默认值。内容不会被修剪,会呈现在元素框之外。

  • hidden:内容会被修剪,并且其余内容是不可见的。

  • scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

  • auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

更多css的相关知识,可访问:web前端自学!!

以上就是css怎么设置一行字显示不完隐藏?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏