css溢出部分隐藏显示滚动条-小码王信奥

首页课程体系集训营地信奥资讯关于我们

服务热线：4000596872

css溢出部分隐藏显示滚动条

来源：小码王信奥时间：2023-11-02 浏览量：70

css文本溢出处理办法，超出部分隐藏内容显示滚动条显示剩余内容或者不显示滚动条，超出部分直接隐藏不显示

overflow: hidden使用比较多在使用时，经常会出现隐藏半个字符

overflow: hidden使用比较多在使用时，经常会出现隐藏半个字符，下图就出现字符显示不完整，影响用户体验

解决办法：
控制行高来实现，通过查看父元素的高度。设置合理的行高，来实现字符显示不全的情况

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">
        <title>通高科技</title>
        <style>
            div {
              background-color: #eee;
              width: 200px;
              height: 50px;
              border: 1px dotted black;
              overflow: visible;
              margin-left: 40px;
              float: left;

            }
            .div1{
                overflow: hidden;
                line-height: 25px;/* 行高 */
            }


        </style>
    </head>
    <body>
            <div class="div1">当您想更好地控制布局时，可以使用 overflow 属性。overflow 属性规定如果内容溢出元素框会发生什么情况。overflow: hidden超出隐藏不显示</div>

    </body>
</html>

Overflow属性控制超出文本显示隐藏

CSS Overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

overflow 属性可设置以下值：

visible - 默认。溢出没有被剪裁。内容在元素框外渲染

hidden - 溢出被剪裁，其余内容将不可见

scroll - 溢出被剪裁，同时添加滚动条以查看其余内容

auto - 与 scroll 类似，但仅在必要时添加滚动条

PS：overflow 属性仅适用于具有指定高度的块元素。也就说必须设置高度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">
        <title>通高科技</title>
        <style>
            div {
              background-color: #eee;
              width: 200px;
              height: 50px;
              border: 1px dotted black;
              overflow: visible;
              margin-left: 40px;
              float: left;

            }
            .div1{
                overflow: hidden;
            }
            .div2{
                overflow: scroll;
            }
            .div3{
                overflow: auto;
            }
        </style>
    </head>
    <body>

            <div>默认情况下，溢出是可见的，这意味着它不会被裁剪，而是在元素框外渲染： overflow: visible;</div>
            <div class="div1">当您想更好地控制布局时，可以使用 overflow 属性。overflow 属性规定如果内容溢出元素框会发生什么情况。overflow: hidden超出隐藏不显示</div>
            <div class="div2">当您想更好地控制布局时，可以使用 overflow 属性。overflow 属性规定如果内容溢出元素框会发生什么情况。overflow: scroll超出加滚动条以查看其余内容</div>
            <div class="div2">当您想更好地控制布局时，可以使用 overflow 属性。overflow 属性规定如果内容溢出元素框会发生什么情况。overflow: auto超出加滚动条以查看其余内容,没有超出不显示滚动</div>
            <div class="div2">没有超出不显示滚动</div>


    </body>
</html>

上一篇：css怎么将边框设置为圆角

下一篇：css常用的文本属性标签

你也想0元体验小码王信奥集训营吗？

填写信息免费预约

姓名：

城市：

电话：

免费领取

免责申明：以上展示内容来源于合作媒体、企业机构、网友提供或网络收集整理，版权争议与本站无关，文章涉及见解与观点不代表小码王官方立场，请读者仅做参考。本文标题：css溢出部分隐藏显示滚动条，本文链接：http://www.xiaomawang.vip/help/20933.html；欢迎转载，转载请说明出处。若您认为本文侵犯了您的版权信息，或您发现该内容有任何涉及有违公德、触犯法律等违法信息，请您立即通过邮件（邮箱号： hzlixy@xiaoma.cn）联系我们及时修正或删除。