Question

假设我在h1元素中有一个标题（任何元素都可以）。它的内容是动态的（不知道标题的长度）。它应该显示在一行中。 h1在有限大小的DIV（我们称之为容器）中。

我如何知道元素（h1）是否溢出其容器（DIV）？

因此，如果它溢出，我会应用CSS类来处理这种情况。例如，我将h1的隐藏内容滚动到视图中。

定义容器的宽度是相对于屏幕尺寸的。

示例：

＆＃13;

#container {
    width: 60%;
    background-color: gray;
    height: 50px;
    // overflow: hidden;
    position: relative;
}

h1 {
    overflow: hidden;
    height: 100%;
    margin: 0;
    line-height: 50px;
}

＆＃13;

<div id="container">
    <h1>a soft white or grey mineral consisting of hydrated calcium sulphate. It occurs chiefly in sedimentary deposits and is used to make plaster of Paris and fertilizers, and in the building industry.</h1>
</div>

＆＃13;

最好的解决方案是，如果它可以用于：ngIf中的主要版本，ngClass指令中的次要版本，但以下任何技术都很好：Javascript，{{1} }，AngularJS，CSS。

Answer 1

假设jquery你可以检查元素的宽度。

    List<Information> data = Collections.emptyList();

    public MyAdapter(Context context,List<Information> data) {
       inflater=LayoutInflater.from(context);
       this.data = data;
       ^^^^^^^^^^^^^^^^ add this statement
    }

}

Answer 2

以下是for heading, cell in zip(context.active_outline.headings, context.active_outline.cells)中的解决方案。它不依赖于父元素：

AngularJS directive

用法示例：

var myDirective = angular.module('myDirective', []);
myDirective.directive( 'myDirective' , ['$timeout' , function($timeout) {
    return {
        link: function (scope , element , attrs) {

            // Wait few milliseconds until element is re-rendered 
            // so that element properties reflect content size.
            $timeout( function(){
                if (element[0].scrollWidth > element[0].offsetWidth){
                    // overflow
                }
            }, 200); // $timeout
        } // link
    }; // return
}]); // myDirective

注意：父元素必须具有受限大小，否则它将调整为内容，元素永远不会溢出。

JavaScript，AngularJS：我如何知道元素是否大于其容器？

2 个答案: