<p>Вибери потрібне значення для <code>text-overflow</code>:</p>

<div class="inputs">
  <input id="clip" checked name="text-overflow" type="radio"/>
  <label for="clip">clip</label>
  <message for="clip">Зайвий текст буде обрізано.</message>
  
  <input id="ellipsis" name="text-overflow" type="radio"/>
  <label for="ellipsis">ellipsis</label>
  <message for="ellipsis">Зайвий текст буде обрізано, а до кінця рядка додано три крапки.</message>
  
</div>

<p id="message">Зайвий текст буде обрізано.</p>

<hr>

<div id="block">
  Це просто дуууууже довгий рядочок.
</div>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  text-align: center;
  font-family: momospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}

#form {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  background: yellow;
	font-family: monospace;
	padding: 4px;
	color: #222;
  white-space: nowrap; 
  overflow: hidden;
	width: 16em; 
  text-overflow: clip;
}

#text {
  height: 60px;
  background-color: #eee;
  padding: 16px 0;
}

message {
  display: none;
}

var $message = $('#message');

$('.inputs').find('input').on('change', function() {
  
  var $messageText = $("message[for='"+$(this).attr('id')+"']")
  $message.text($messageText.text());
  
  var newVal = null;
  if ( $(this).attr('id') != 'string' ) {
    newVal = $(this).attr('id');
  } else {
    newVal = '"' + $(this).val() + '"';
  }
  
  $('#block').css('text-overflow', newVal);
  
});