Question

我有：

的jQuery
jQuery dotdotdot插件根据容器大小裁剪省略号的文本。
jQuery Actual插件可以获取隐藏元素的大小。

这些插件有效。当我需要裁剪隐藏容器内的文本时，会出现问题。在这种情况下，由于设置了br标签的内容，裁剪会被忽略或失败，但会出现异常。

如何裁剪隐藏容器内的文字？

$(function() {
  $("button").click(function() {
    $($(this).data("dest")).find("div").dotdotdot().end().show();
  });
});

section {
  box-sizing: border-box;
  width: 256px;
  height: 100px;
  padding: 8px;
  border: 1px solid;
  float: left;
  margin: 8px;
}

div {
  width: 100%;
  height: 100%;
}

#hidden {
  display: none;
}

<script src="//code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="//pastebin.com/raw.php?i=4hAcxkH4"></script> <!-- dotdotdot -->
<script src="//pastebin.com/raw.php?i=KpmR9HmG"></script> <!-- actual -->

<p>
  <button data-dest="#visible">На видимой</button>
  <button data-dest="#hidden">На скрытой</button>
</p>

<section id="visible">
  <div><strong>CyberLink PowerDirector 12</strong> выводит процесс создания видео на абсолютно новый уровень. Функция <em>MultiCam</em> поддерживает до 4 камер, что позволяет пользователю работать с записями, произведенными несколькими устройствами одновременно. Программа включает в себя модуль Theme Designer, который позволяет создавать безупречные анимационные 3D слайд-шоу из видео и фотографий.</div>
</section>

<section id="hidden">
  <div><strong>CyberLink PowerDirector 12</strong> выводит процесс создания видео на абсолютно новый уровень. Функция <em>MultiCam</em> поддерживает до 4 камер, что позволяет пользователю работать с записями, произведенными несколькими устройствами одновременно. Программа включает в себя модуль Theme Designer, который позволяет создавать безупречные анимационные 3D слайд-шоу из видео и фотографий.</div>
</section>

PS：Same question in Russian。

Answer 1

只需在dotdotdot来电之前显示，如果您需要再次隐藏它，请稍后隐藏它：

$($(this).data("dest")).show().dotdotdot();

或

$($(this).data("dest")).show().dotdotdot().hide();

Answer 2

似乎，我找到了解决方案。明天在真实的代码中尝试它，但似乎没问题。

http://jsfiddle.net/Lhs513ws/7/

$(function() {
    $("button").click(function() {
        var $container = $($(this).data("dest")), $dest = $container.find(".dest");
        
        if ($dest.is(":visible")) {
            $dest.dotdotdot();
        } else {
            var $marker = $("<div>");
            
            var width = $dest.actual('width'), height = $dest.actual('height');
            
            var $temp = $("<div>").css({
                position: 'fixed',
                left: '-99999px'
            }).appendTo("body");
            
            $marker.replaceWith(
            	$dest
            	    .before($marker)
            	    .width(width).height(height)
            	    .detach().appendTo($temp).dotdotdot()
            	    .detach()
            	    .width("").height("")
            );
            
            $temp.remove();
        }
        
        $container.show();
    });
});

section {
    box-sizing: border-box;
    width: 256px;
    height: 100px;
    padding: 8px;
    border: 1px solid;
    float: left;
    margin: 8px;
    position: relative;
}

.dest {
    width: 100%;
    height: 80%;
    border: 1px dotted red;
}

#hidden {
    display: none;
}

<script src="//code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="//pastebin.com/raw.php?i=4hAcxkH4"></script> <!-- dotdotdot -->
<script src="//pastebin.com/raw.php?i=KpmR9HmG"></script> <!-- actual -->

<p>
    <button data-dest="#visible">На видимой</button>
    <button data-dest="#hidden">На скрытой</button>
</p>

<section id="visible">
    <div>123</div>
    <div class="dest"><strong>CyberLink PowerDirector 12</strong> выводит процесс создания видео на абсолютно новый уровень. Функция <em>MultiCam</em> поддерживает до 4 камер, что позволяет пользователю работать с записями, произведенными несколькими устройствами одновременно. Программа включает в себя модуль Theme Designer, который позволяет создавать безупречные анимационные 3D слайд-шоу из видео и фотографий.</div>
    <div>456</div>
</section>

<section id="hidden">
    <div>123</div>
    <div class="dest"><strong>CyberLink PowerDirector 12</strong> выводит процесс создания видео на абсолютно новый уровень. Функция <em>MultiCam</em> поддерживает до 4 камер, что позволяет пользователю работать с записями, произведенными несколькими устройствами одновременно. Программа включает в себя модуль Theme Designer, который позволяет создавать безупречные анимационные 3D слайд-шоу из видео и фотографий.</div>
    <div>456</div>
</section>

如何在ahidden块里面用省略号格式化的多行文字进行裁剪？

2 个答案: