代码之家 › 专栏 › 技术社区 › Naibaf

在固定高度/宽度的div中显示溢出字符串的底部?

overflow css html jquery

Naibaf · 技术社区 · 9 年前

出身背景

我有一个固定宽度和高度的不可滚动div。这里有一个JSFiddle: https://jsfiddle.net/Naibaf/47fm4pvf/2/

球门

如果不是前一个字符串,我想显示尽可能多的底部字符串。

推理和问题

你应该问自己:为什么?我正在尝试显示 news-alert-like-bar ,但我将div的内容与 setInterval() 这会使它很快溢出。

依我看,jQuery .scrollTop() 比如这里: http://jsfiddle.net/2WpQf/1/ 不适合,因为我希望我的div不可滚动。CSS也是如此 overflow .

有人知道怎么做吗?

HTML格式

<p>How to make the bottom of a string visible within the boundaries of a div and NOT show or hide the top part?</p>
<p>The opposite of what I want:
</p>
<div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>

CSS公司

div.hidden {
background-color: #00FF00;
width: 100px;
height: 100px;
overflow: hidden;
}

1 回复 | 直到 9 年前

DaniP 9 年前

你可以做的是使用一个额外的容器 position:absolute 从底部看,这样当您添加更多文本时,块似乎会从下到上增加:

div.hidden {
  position:relative;
    background-color: #00FF00;
    width: 100px;
    height: 100px;
    overflow: hidden;
}
/*Position extrawrap*/
div.hidden span {
  position:absolute;
  width:100%;
  bottom:0;
  left:0;
}

<div class="hidden">
  <! -- Extra Wrapper Here -->
  <span>
    You can use the overflow property when you want to have better control of the layout. The default value is visible.
  </span>
</div>

Demo Fiddle