溢出省略号结合三部分“选图”

Question

我已成功使用overflow: ellipsis 获得两个跨度以在表格单元格内工作，同时保持响应。

手头的问题是我需要使用 3 部分图像将两个跨度之一标记为选中。

在最简单的形式中，我有一个具有以下结构的表：

<table class="my-table table table-bordered table-striped">
    <tbody>
        <tr>
            <td class="truncate-container">
                <span class="truncate selected">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
                <span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
            </td>         
        </tr>
    </tbody>
</table>

CSS：

.my-table {
    width: 100%;
}

.truncate-container {
    border: none !important;
    max-width: 200px;
    white-space: nowrap;
}

.truncate-container .truncate {
    width: 48%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;  
}

.selected {
  position: relative;
  height: 28px;
  margin: 0 15px;
  background: url("http://i.stack.imgur.com/DaQcG.png");
  display: inline-block;
    color: blue;
}

.selected::before,
.selected::after {
  content: ' ';
  position: absolute;
  top: 0;
  width: 15px;
  height: 28px;
}

.selected::before {
  left: -14px;
  background: url("http://i.stack.imgur.com/6m2HC.png") no-repeat;
}

.selected::after {
  right: -8px;
  background:url("http://i.stack.imgur.com/2WA5B.png") 100% no-repeat;
}

http://jsfiddle.net/L4ceuaws/

如果您调整 HTML 窗格的大小，您可以看到省略号正常工作，但选择没有按预期工作。

伪元素 ::before 和 ::after 与省略号的这种特殊组合可以在纯 CSS 中完成，还是我必须求助于 JS（Angular 过滤器）进行截断？

Answer 1

在我看来，你有两种选择：

选项 1：

使用纯 HTML 和 CSS，您可以使用三个不同的 span 生成省略号：tip、content 和 butt。

选项 2：

使用一点 jQuery 魔法来填充 .selected 跨度，仅包含要显示的文本，以及必要的跨度元素以在 dom 上生成省略号。

$(".truncate.selected").each(function () {
    if ($(this).children("span").length > 0) return true;
    else $(this)
        .html('<span class="content">' + $(this).text() + '</span>')
        .prepend('<span class="tip" />')
        .append('<span class="butt" />');
});

p {
    font-weight:bold;
}
.my-table {
    width: 100%;
}
.truncate-container {
    border: none !important;
    max-width: 200px;
    white-space: nowrap;
}
.truncate-container .truncate {
    width: 48%;
    display: inline-block;
}
.selected span {
    display:block;
    float:left!important;
}
.selected .content {
    height: 28px;
    background: url("http://i.stack.imgur.com/DaQcG.png");
    color: blue;
    overflow:hidden;
}
.selected .tip, .selected .butt {
    height: 28px;
}
.selected .tip {
    background: url("http://i.stack.imgur.com/6m2HC.png") no-repeat;
    width:14px;
}
.selected .butt {
    background:url("http://i.stack.imgur.com/2WA5B.png") 100% no-repeat;
    width:8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Ellipsis generated manually from HTML</p>
<table class="my-table table table-bordered table-striped">
    <tbody>
        <tr>
            <td class="truncate-container"> <span class="truncate selected">
                    <span class="tip"></span>
 <span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
 <span class="butt"></span>
</span> <span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>

            </td>
        </tr>
    </tbody>
</table>
<p>Ellipsis generated dynamically using jQuery</p>
<table class="my-table table table-bordered table-striped">
    <tbody>
        <tr>
            <td class="truncate-container"> <span class="truncate selected">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
 <span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>

            </td>
        </tr>
    </tbody>
</table>