user7030890 user7030890 - 3 months ago 17
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 - "

" and at the end this long string which is attached inside. So I want to not see the image below with this long string "
". 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);
if (curEl.find(".phase-arrows-last-element-cj").length == 0) {
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;

#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=""></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>

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


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;