Question

在我的HTML中，我得到了来自控制器的'响应'。响应中的行数不同（最大值为3）。在我的html页面上“保留”3行的最佳方法是什么，所以带有“SOMETHING”段落的下一个div不会被“响应”向下滚动？

<div class="row">
    <p ng-bind-html="response"></p>
</div>
<div class="row">
    <p>SOMETHING</p>
</div>

Answer 1

使用CSS，修复3行占用的高度，并使用overflow在固定的高度div内滚动。

CSS Overflow可能会对您有所帮助。

.row-fixed-height { height: 150px; overflow: scroll; }

并在HTML中：

<div class="row-fixed-height">
  <p ng-bind-html="response"></p></div>

Answer 2

由于线条的高度因字体和字体大小而异，我会使用换行符来预约＆＃34;三条线。如果您在div或p上使用固定高度，则可能会在使用其他字体的其他浏览器上跳转。

现场演示：

＆＃13;

#response {
    background: red;
}

＆＃13;

<div class="row">
    <p id="response" ng-bind-html="response">
        <br />
        <br />
        <br />
    </p>
</div>
<div class="row">
    <p>SOMETHING</p>
</div>

＆＃13;

JSFiddle版本：https://jsfiddle.net/rspyho74/

Answer 3

正如oori所指出的，这是关于CSS而不是Angular。将高度固定为3行的最简单方法是使用em单位：

.row{
	margin: 10px;
	padding: 5px;
	border: 1px solid #000;
	border-radius: 5px;
}
p{
	float: left;
	margin: 0 5px;
	padding: 5px;
	border: 1px solid #000;
	height: 3em;
}

<div class="row">
    <p ng-bind-html="response"></p>
    <p ng-bind-html="response">Line 1</p>
    <p ng-bind-html="response">Line 1<br>Line 2</p>
    <p ng-bind-html="response">Line 1<br>Line 2<br>Line 3</p>
    <div style='clear: both;'></div>
</div>
<div class="row">
    <p>SOMETHING</p>
    <div style='clear: both;'></div>	
</div>

正如您所看到的，无论有多少行，该段都会保持其高度。如果删除height属性，则可以看到差异。

显示到固定的HTML区域

3 个答案: