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

发布日期：2023-11-02 来源：小码王编程查看人数： 7

导读：css文本溢出处理办法，超出部分隐藏内容显示滚动条显示剩余内容或者不显示滚动条，超出部分直接隐藏不显示目录1overflow: hidden使用比较多在使用时，...

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>

你也想0元试听小码王少儿编程课程吗？
填写信息免费预约

免责说明：以上展示内容源于网络、合作媒体和网友提供，转载请说明出处。我们对站内所有内容、观点保持中立，如您发现该内容有任何违法/侵权信息，请及时联系我们处理！
本文标题：css溢出部分隐藏显示滚动条，本文链接： http://www.xiaomawang.vip/help/20933.html

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

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