【问题标题】:jquery ellipsis doesn't show dots at the endjquery ellipsis 结尾不显示点
【发布时间】:2013-08-30 15:00:06
【问题描述】:

Jquery Ellipsis 末尾不显示三个点。

HTML:

<div class="slidertext three_lines">SIA “Baltic Metolat” provides mechanical surface treatment, priming and painting of technical task. We are able to handle oversized items.</div>

jQuery:

jQuery('.three_lines').ellipsis({
    row: 3
});

CSS:

.slidertext {
    margin-left: 1px;
    margin-top: 10px;
    font-size: 12px;
    line-height: 20px;
    height: 58px;
    overflow: hidden;
    margin-bottom: 5px;
    width: 224px;
}

它只显示三行,但最后不显示点。

现场直播可以在这里看到:http://www.metolat.lv/(搜索文本“提供机械表面”)。

【问题讨论】:

  • 那个活生生的例子看起来并没有缩短文本。它显示了 3 行,因为第四行由于其容器的固定高度和隐藏溢出而被隐藏。
  • 真的!那么问题是为什么会这样呢?

标签: jquery html css wordpress ellipsis


【解决方案1】:

那个活生生的例子看起来根本没有缩短文本。它显示了 3 行,因为第四行由于其容器的固定高度和隐藏溢出而被隐藏。

看起来,Ellipsis 插件通过比较文本元素的总高度与 n(此处为 3)行的高度来计算是否需要截断文本元素。由于您在 CSS 中为该 div 设置了固定高度,因此插件会查看它并对自己说“该元素的高度小于或等于 3 行文本的高度”,因此它什么也不做。

不过,您的称呼是正确的,我发现它适用于您的标题“金属结构...”

【讨论】:

  • 是的。禁用height 规则并再次执行.ellipsis() 会显示预期的截断。
  • 顺便说一句,如果我需要元素的最小高度怎么办?如何解决这个问题?如果只有两行那会不会有问题?
猜你喜欢
  • 2013-10-25
  • 1970-01-01
  • 1970-01-01
  • 2017-02-07
  • 2021-12-31
  • 1970-01-01
  • 2020-11-17
  • 2022-01-11
  • 1970-01-01
相关资源
最近更新 更多