Question

我有一个响应式网页，其中从数据库加载文本。

<p style="width: 95%; font-size:13px; padding-right:20px; color:#babec5; margin-top: 3px;">
Just 7 days left ... Bob, Father's Day is only one week away, s...</p>

'...'之后还有更多文字。 p元素有两行垂直，我希望能够剪切掉任何内容，但如果页面大小发生变化，仍会填满<p>。

Answer 1

你可以使用css overflow: hidden;，这会切断文字。

如果你想在结束时有三个点，你也可以使用text-overflow: ellipsis;大多数现代浏览器支持它。

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow?redirectlocale=en-US&redirectslug=CSS%2Ftext-overflow

为了使它工作，但你需要一个固定的高度或最大高度

Answer 2

我只是将

样式设置为包含overflow：hidden

e.g。

p
{
  width: 95%;
  height: 20px;
  overflow: hidden;
}

这是一个jsfiddle所以你可以看到效果（改变右下方的面板尺寸以便看到它的实际效果）

http://jsfiddle.net/mdXCH/

Answer 3

您是否在寻找这种css规则：http://www.w3.org/TR/2002/WD-css3-text-20021024/#text-overflow-props

获取<p>元素以剪切文本</p>

3 个答案: