javascript - 系着长绳子，我想把它缩小

Question

这就是我在我们网站上的内容。 该错误是最明显的客户端事件 - “Kundenaktivität”以及最后附加在内部的长字符串。所以我不想看到下面带有这个长字符串“asdasdaxcasdasdasasdasdaxcasdasdasdasdasdasdacasascasc”的图像。你知道我该怎么做吗？ enter image description here 当用户昏迷并在新阶段的 Canvas 内单击时，会附加此信息。 这是阶段内使用的代码片段。

var Cockpit = {};

Cockpit.CjmCanvas.setMapTableCjHeader = function()
{
    var canvasCjRow = $('#map-table .mm-canvas-cj');
    var headerElements = $('.map-table-header');
    headerElements.each(function() {
        var cxId = $(this).data("id");
        var curEl = canvasCjRow.find(".map-table-col-"+cxId);
        $(this).find(".map-table-cj-col").html(curEl.find(".map-table-displayfield").parent().html());
        if (curEl.find(".phase-arrows-last-element-cj").length == 0) {
            $(this).find(".map-table-menu-icon-cj").remove();
        }
        if ($(this).find('.cjmp-change-cb').length > 0) {
            var select = $(this).find('.cjmp-change-cb');
            var selOption = select.find(':selected');
            select.on("change", function() {
                if (!confirm($(this).data("confirm"))) {
                    selOption.prop("selected", "selected");
                }
            });
        }
      //With this part I tried to add this title to be smaller, but i couldn't pin point the right text (nesto)
        $('.cjmp-drag-element-content').on("click", function(){
            var title = $(".cjmp-drag-element-content span:last-child").text();
            var newTitle = title.substring(0, 5);
            var nesto = $(".cjmp-drag-element-content span:last-child").text(newTitle + "...");
            return nesto;
        });
        $('.mm-canvas-cj').remove();
    });
    $('#canvas-cj').parent().remove();
};

#map-table-box #map-table .map-table-header-row .corner-ca span {
    line-height: normal !important;
    max-height: 38px;
    margin: 3px 3px 3px 10px !important;
    display: inline-block;
    overflow: hidden;
}

element {
    display: inline-block;
    line-height: 110%;
    width: 135px;
    padding: 2px 4px;
    height: 27px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cjmp-drag-element-content cjmp-choosen">
  <span class="cjm-score-value" style="background-color: #75EA00;">8.6</span>
  <span class="cjmp-content-visitors" id="cjmpc-visitors-210">0%</span>
  <span style="display: inline-block; line-height: 220%; width: 135px; padding: 2px 4px; height:27px;">testaasdfasdf </span>
</div>

这完全是两个不同的 css。 Element 是在 HTML 中描述的元素，map-table-displayfield 是每次点击 Canvas 时显示的 css。 Canvas 如图所示。

Answer 1

您始终可以通过设置 max-width 和 overflow 省略号来使用 chop 方法，如下所示:

.limit-length {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

编辑

您可以关闭text-overflow: ellipsis，并可以选择使用此类为文本嵌套另一个对象，这将允许箭头保持在原位