css怎样设置文本显示高度并且隐藏超出部分（css 文本超出隐藏）

25-02-28 11

本文将分享css怎样设置文本显示高度并且隐藏超出部分的详细内容，并且还将对css文本超出隐藏进行详尽解释，此外，我们还将为大家带来关于css元素移动的时候怎么让超出部分隐藏起来、css将第1/n行文本

本文将分享css怎样设置文本显示高度并且隐藏超出部分的详细内容，并且还将对css 文本超出隐藏进行详尽解释，此外，我们还将为大家带来关于css 元素移动的时候怎么让超出部分隐藏起来、css 将第1/n行文本超出部分替换成省略号、css 文字超出部分隐藏、css 文本超出 2 行就隐藏并且显示省略号的相关知识，希望对你有所帮助。

本文目录一览：

css怎样设置文本显示高度并且隐藏超出部分（css 文本超出隐藏）
css 元素移动的时候怎么让超出部分隐藏起来
css 将第1/n行文本超出部分替换成省略号
css 文字超出部分隐藏
css 文本超出 2 行就隐藏并且显示省略号

css怎样设置文本显示高度并且隐藏超出部分（css 文本超出隐藏）

方法：1、利用height属性设置文本元素的显示高度，语法为“文本元素{height:高度值;}”；2、利用overflow属性将超出文本高度的部分隐藏起来，语法为“文本元素{overflow:hidden;}”。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css怎样设置文本显示高度并且隐藏超出部分

我们可以通过height属性设置文本元素的显示高度，通过overflow属性设置文本元素超出高度时显示隐藏。

overflow 属性规定当内容溢出元素框时发生的事情。当元素值设置为hidden是就会隐藏超出的部分。

示例如下：

<!DOCTYPE html>
<html>
    <head>
        <Meta charset=utf-8>
        <style type=text/css>
            div{
                width:200px;
                height:100px;
                border:1px solid black;
                overflow:hidden;
            }
        </style>
    </head>
    <body>
        <div>css设置文本显示高度超出部分隐藏css设置文本显示高度超出部分隐藏css设置文本显示高度超出部分隐藏css设置文本显示高度超出部分隐藏css设置文本显示高度超出部分隐藏css设置文本显示高度超出部分隐藏css设置文本显示高度超出部分隐藏</div>
    </body>
</html>

输出结果：

（学习视频分享：css视频教程）

css 元素移动的时候怎么让超出部分隐藏起来

图片中菜单的元素是可移动的。我想实现菜单的元素移动红线那里就把超出部分隐藏起来这个要怎么实现啊？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>http://hi.baidu.com/see7di/home</title>
    <script type="text/javascript" src="/weishiji/assets/fd710db1/jquery.js"></script>

    <script type=''text/javascript''>
        (function($){
            //拖拽插件,参数:id或object
            $.Move = function(_this){
                if(typeof(_this)==''object''){
                    _this=_this;
                }else{
                    _this=$("#"+_this);
                }
                if(!_this){return false;}

                _this.css({''position'':''absolute''}).hover(function(){$(this).css("cursor","move");},function(){$(this).css("cursor","default");})
                _this.mousedown(function(e){//e鼠标事件欢迎转载但请注明出处Email:See7di@Gmail.com,Seven的部落格http://hi.baidu.com/see7di/home
                    var offset = $(this).offset();
                    var x = e.pageX - offset.left;
                    var y = e.pageY - offset.top;
                    _this.css({''opacity'':''0.3''});
                    $(document).bind("mousemove",function(ev){//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件
                        _this.bind(''selectstart'',function(){return false;});
                        var _x = ev.pageX - x;//获得X轴方向移动的值欢迎转载但请注明出处Email:See7di@Gmail.com,Seven的部落格http://hi.baidu.com/see7di/home
                        var _y = ev.pageY - y;//获得Y轴方向移动的值
                        _this.css({''left'':_x+"px",''top'':_y+"px"});
                    });
                });

                $(document).mouseup(function(){
                    $(this).unbind("mousemove");
                    _this.css({''opacity'':''''});
                })
            };
        })(jQuery)
        //插件調用欢迎转载但请注明出处Email:See7di@Gmail.com,Seven的部落格http://hi.baidu.com/see7di/home
        $(function(){
            $.Move(''m1'');
        });
    </script>
</head>
<body>
<style type=''text/css''>
    #m1{border:1px solid;}
    #hidden{
        border:1px solid red;
        width: 500px;
        height:500px;
    }
</style>
<div id="m1">
    <ul>
        <li><a href="">菜单一</a>
            <ul>
                <li><a href="">子菜单1</a></li>
                <li><a href="">子菜单2</a><ul><li><a href="">子菜单7</a></li></ul></li>
                <li><a href="">子菜单3</a></li>
            </ul>
        </li>
        <li><a href="">菜单二</a>
            <ul>
                <li><a href="">子菜单4</a></li>
                <li><a href="">子菜单5</a></li>
                <li><a href="">子菜单6</a></li>
            </ul>
        </li>
    </ul>
</div>
<div id="hidden"></div>
</body>
</html>

css 将第1/n行文本超出部分替换成省略号

　　1、第一行

　　　　.text-overflow{

　　　　　　white-space: nowrap;

　　　　　　overflow: hidden;

　　　　　　text-overflow: ellipsis;

　　　　}

　　2、第n行 -webkit-

　　　　.text-overflow-multi{

　　　　　　text-overflow: -o-ellipsis-lastline;

　　　　　　overflow: hidden;

　　　　　　text-overflow: ellipsis;

　　　　　　display: -webkit-box;//将元素设为盒子伸缩模型显示

　　　　　　-webkit-line-clamp: 2; //控制行数

　　　　　　-webkit-box-orient: vertical;//伸缩方向设为垂直方向

　　　　}

css 文字超出部分隐藏

未做隐藏处理

执行结果：

1、1行超出部分省略号

效果：

2、多行超出部分隐藏（目前只能在chrome浏览器中使用，其他浏览器不兼容）

效果：

-webkit-line-clamp 属性定义显示行数可以随需求改变

目前开发的使用方式是：

限制文字盒子高度为文字 line-height 大小的倍数，至于其他显示字数由后端限制

效果：

css 文本超出 2 行就隐藏并且显示省略号

首先，要知道css的三条属性。

overflow:hidden; //超出的文本隐藏

text-overflow:ellipsis; //溢出用省略号显示

white-space:nowrap; //溢出不换行

这三个是css的基础属性，需要记得。

但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？



css3解决了这个问题，解决方法如下：

display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）

-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。



最后的css样式如下：

overflow:hidden; 

text-overflow:ellipsis;

display:-webkit-box; 

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

我们今天的关于css怎样设置文本显示高度并且隐藏超出部分和css 文本超出隐藏的分享已经告一段落，感谢您的关注，如果您想了解更多关于css 元素移动的时候怎么让超出部分隐藏起来、css 将第1/n行文本超出部分替换成省略号、css 文字超出部分隐藏、css 文本超出 2 行就隐藏并且显示省略号的相关信息，请在本站查询。

本文标签：