user7030890 user7030890 - 16 days ago 7
CSS Question

Long string attached and I want to shrink it

This is what I have in our site.
The error is the most obviously Client activity - "

Kundenaktivität
" and at the end this long string which is attached inside. So I want to not see the image below with this long string "
asdasdaxcasdasdasasdasdaxcasdasdasdasdasdasdacasascasc
". Do you know how I can do this ?
enter image description here
This is attached when a customer comas and clicks on inside a canvas on a new phase.
This is the code snippet that is used inside the phase.



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>





Those are totally two different
css's
. Element is an element which is described in the HTML, and the
map-table-displayfield
is the
css
for the display which is displayed every time someone clicks on canvas. Canvas is shown in the picture.

Answer

You could always use a truncate method by setting max-width and overflow ellipsis like this:

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