middle ellipsis

ellipsis in the middle of long strings

by Bryson Murray

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <p>Middle Ellipsis</p>
  <span id='subString'></span>
  <div>
    <input id="longInput" type="textbox"></input>
  </div>
  <span id='subString2'></span>
  <div>
    <input id="longInput2" type="textbox"></input>
  </div>
  <span id='subString3'></span>
  <div>
    <button>Change color</button>
  </div>
  
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 100%;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}
#longInput, #longInput2{
  width: 505px;
}

JavaScript

// find elements
var banner = $("#banner-message")
var button = $("button")
var longInput = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
var long = "START_UploadaDocumentcomplex_modificationscomplex_modificationscomplex_modificationscomplex_modificationscomplex_modificationscomplex_modificationscomplex_modificationscomplex_modificationscomplex_modificat___END"

// handle click and add class
button.on("click", function(){
  if(banner.hasClass("alt")){
   	banner.removeClass("alt")
  }
  else{
  	banner.addClass("alt");
  }
});

var middleEllipsis = function (longString, maxChars = 5){
	if(longString.length <= maxChars){
  	return longString;
  }
  var subStringLength = parseInt((maxChars-3)/2);
  var preEllipsis = longString.substring(0,subStringLength);
  var postEllipsis = longString.substring(longString.length - (subStringLength), longString.length);
   return preEllipsis + "..." + postEllipsis;
}

var calcCharsElement = function(element){
	calcChars($(element).width(),$(element).css('font-size'));
  var tagName = $(element).prop("tagName").toLowerCase();
  var ruler = $("<"+tagName+"><"+tagName+">").css();
  
  
  
  
}; 
var calcChars = function (width,fontSize){
  $('#subString2').html("width: "+width+"; font-size: "+fontSize+";");
  //font constants are about 60% of font size
	var fontConstant = fontSize * .60;  
	var charsPerLine = Math.floor(width / (fontSize / fontConstant));
  $('#subString2').html("width: "+width+"; font-size: "+fontSize+"; fontConst: "+fontConstant+"");
  $('#subString3').html(charsPerLine);
  return charsPerLine;
}


$(document).ready(function(){
	$('#longInput').val(middleEllipsis(long));
  
  $('#longInput2').val(middleEllipsis(long, calcCharsElement($('#longInput2'))));

});