多行文本溢出：CSS或JS中的省略号，带有img标签

发布于 2024-12-24 20:49:56 字数 465 浏览 2 评论 0原文

我尝试使用：

CSS3中的文本溢出省略号功能（但不支持多行）
几个jquery插件，例如dotdotdot（http ://dotdotdot.frebsite.nl/)
jquery 自动省略 (http://pvdspek.github.com/jquery.autoellipsis/）。

所有这些工具都工作得很好，但如果内容包含图像，则使用 dotdotdot 或 jquery.autoellipsis 计算的截断高度是错误的。

我只是想知道是否有人有一个好主意来处理这个问题（也许是一些服务器端处理？），提前致谢:-)。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

深巷少女 2024-12-31 20:49:56

通过为多行 div 设置固定高度，然后绝对定位 img 和省略号来使用您自己的省略号定位偏移以简化脚本。右偏移量特定于每个句子的特定字母的font-size 和字距调整，因此除非使用等宽字体，否则需要反复试验。基本结构是这样的：

<style type="text/css">
.truncate { position: absolute; top: 20px; right: 6px; background-color: #fff; }
.lineup { top: 6px; }
.monalisa { position: absolute; top: 2px; left: -18px; }
.wrapper { position: relative; width: 360px }
.textblob { width: 330px; height: 30px; }
</style>
<!--...-->
<div class="wrapper">
  <img class="monalisa" src="hppt://www.stackoverflow.com/favicon.ico" alt="SO"/>
  <div class="textblob">
    <span class="truncate">…</span>
    <span class="snippet">blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah</span>
  </div>
</div>

Use your own ellipsis positioning offsets by setting a fixed height for the multi-line div, then absolutely positioning the img and the ellipsis to simplify the script. The right offset is specific to the font-size and kerning of the particular letters of each sentence, so trial and error is necessary unless a monospace font is used. The basic structure is something like this:

<style type="text/css">
.truncate { position: absolute; top: 20px; right: 6px; background-color: #fff; }
.lineup { top: 6px; }
.monalisa { position: absolute; top: 2px; left: -18px; }
.wrapper { position: relative; width: 360px }
.textblob { width: 330px; height: 30px; }
</style>
<!--...-->
<div class="wrapper">
  <img class="monalisa" src="hppt://www.stackoverflow.com/favicon.ico" alt="SO"/>
  <div class="textblob">
    <span class="truncate">…</span>
    <span class="snippet">blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah</span>
  </div>
</div>

回复收藏 0 原文

初心 2024-12-31 20:49:56

如果您需要 X 浏览器支持（不仅适用于 Opera 和 Webkit，如 @c69 所解释的）。

我发现了一个更奇特的方法。
也可进行手动调节。

看一下 jsfiddle 上的工作示例。

HTML

<p>
    Lorem ipsum dolor sit amet, consectetur
</p>

CSS

p {
    height: 3.7em;
    position: relative;
    overflow: hidden;
    width: 235px;
}

p:after{
    /* works since IE10 , ff16, chrome26, safari6.1,opera12, android4.4 ; previouse browser need prefixes */
    background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,2055,255,1) 30%); 
    /* for IE9,IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); 
    bottom: 0;
    content: "...";
    float:right;
    padding-left: 10px;
    position: absolute;
    right: 0;
}

来源：
1 mobify
2 个 css-tricks

If you need X-Browser support(not only for Opera and Webkit, like @c69 explained).

I found a more fancy way.
But also for manually adjustment.

take a look at a working example on jsfiddle.

HTML

<p>
    Lorem ipsum dolor sit amet, consectetur
</p>

css

p {
    height: 3.7em;
    position: relative;
    overflow: hidden;
    width: 235px;
}

p:after{
    /* works since IE10 , ff16, chrome26, safari6.1,opera12, android4.4 ; previouse browser need prefixes */
    background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,2055,255,1) 30%); 
    /* for IE9,IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); 
    bottom: 0;
    content: "...";
    float:right;
    padding-left: 10px;
    position: absolute;
    right: 0;
}

Source:
1 mobify
2 css-tricks

回复收藏 0 原文

~没有更多了~