Question

这就是我在网站上的内容。错误是最明显的客户端活动 - “Kundenaktivität”，最后是附在内部的长字符串。所以我希望看不到下面这个长字符串“asdasdaxcasdasdasasdasdaxcasdasdasdasdasdasdacasascasc”的图片。你知道我怎么做吗？ enter image description here 当客户在新阶段的画布上进行coma并单击时，会附加此选项。这是阶段内使用的代码段。

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's。元素是HTML中描述的元素，map-table-displayfield是显示的css，每次有人点击画布时都会显示。画布如图所示。

Answer 1

您可以通过设置max-width和overflow省略号来始终使用截断方法：

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

修改

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

长串附加，我想缩小它

1 个答案: