HTML文本溢出与自动高度处理技巧-优快云博客

1.HTML超出文本显示省略号…[text-overflow]
需要对div或者span同时应用Css：

-o-text-overflow:ellipsis;

  text-overflow:ellipsis;

  white-space:nowrap;

  overflow:hidden;

引用自：http://blog.youkuaiyun.com/jcx5083761/article/details/8538071

多行溢出的处理：

.overflowTwoLine{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical; 
}

自动高度

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
    <title>自动高度</title>

    <style type="text/css">
        .container{
            background-color: silver;
            width:100%;
            position:relative;
            overflow:hidden;
        }

        .dummy{
            margin-top: 75%;
        }

        .content{
            position:absolute;
            left:0;
            right:0;
            top:0;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div style="width:50%;">
        <div class='container'>
            <div class='dummy'></div>
            <div class='content'>
                contentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontent
            </div>
        </div>
    </div>


</body>
</html>

只显示右侧滚动条：

    .table-wrapper
    {
        overflow-x:hidden;
        overflow-y: scroll;
    }
    <div class="table-wrapper">
    </div>

符號

“☑”;
“口”;
“√”;

#

两个都是设置的左浮动，为什么DIV边框不见了？
解決方法：
1、再父级标签上也就是加了边框的这个标签设定overflow:hidden;

2、给父级标签也加上float: left;

3、如果内容部分的标签高度不会再变化的话，那么算准内部标签的高度后，再直接给父级设定高度就好了。

html css

符號

#