0

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

<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>如果页面大小发生变化，仍然可以填满。

4

3 回答 3

2

您可以使用 css overflow: hidden;，这将切断文本。

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

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

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

于 2013-06-10T16:46:28.460 回答
0

我只是设置

包含溢出的样式：隐藏

例如

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

这是一个 jsfiddle，因此您可以看到效果（更改右下面板的大小以查看它的实际效果）

http://jsfiddle.net/mdXCH/

于 2013-06-10T16:46:51.450 回答
0

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

于 2013-06-10T16:47:15.473 回答