Mesuti

Максимум, что могу предложить:

div,
div p {
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease
}

div {
  border: 1px solid #bababa;
  display: block;
  width: 155px;
  height: 30px;
  padding: 10px;
  transition: all .3s ease
}

div p {
  display: block;
  position: relative;
  margin: 0;
  overflow-y: hidden;
  height: 35px;
  transition: all .3s ease
}

div p:after {
  position: absolute;
  top: 18px;
  right: 30px;
  content: ' ...';
}

div:hover {
  height: 145px
}

div:hover p {
  white-space: normal;
  overflow: none;
  height: 100%;
}

div:hover p:after {
  display: none
}

Но может быть придется подгонять афтер под каждый текст) Лучше поискать другое решение или не заморачиваться на изначальном количестве строк. Пусть будет одна)

white-space: nowrap;

Означает что весь текст будет отображаться одной строкой, если убрать это свойство, то текст будет отображаться в несколько строк, но при этом не будет работать свойство text-overflow: ellipsis.

Советую обыграть по другому обрезку текста вместо многоточия, например наложением поверх градиента из прозрачный в белый снизу блока, чтобы понятно было что текст еще есть, но он не влез.

div {
  border: 1px solid gray;
  display: block;
  width: 155px;
  height: 30px;
  padding: 10px;
  text-align: justify;

  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease
}

div p {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis
}

div:hover {
  height: 90px
}

div:hover p {
  white-space: normal;
  overflow: none
}

const input = document.querySelector('#textLink');
const buttonSelector = '.link';

Делегирование, назначаем обработчик клика один раз:

document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    input.value = button.innerText;
  }
});

Или, назначаем обработчик клика каждому элементу индивидуально:

document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => input.value = e.currentTarget.textContent);

Где элементы находятся и какой класс надо удалить:

const parentSelector = '.parent';
const className = 'custom';

Удаляем:

document.querySelectorAll(`${parentSelector} > .${className}`).forEach(n => {
  n.classList.remove(className);
});

// или

for (const n of document.querySelector(parentSelector).children) {
  n.className = n.className.replace(RegExp(`(^| )${className}(?= |$)`), '').trim();
}

https://jsfiddle.net/hspxd6jq/6/

background-repeat:no-repeat;
background-size: 50%;
background-position:50%;

По клику на .colors вызывайте функцию пересчёта:

$('.colors').on('click', '.color', function() {
  $(this).toggleClass('checked');
  calculate();
});

В самой функции добавьте обход .colors .checked и суммирование их data-price:

total += $('.colors .checked', this)
  .get()
  .reduce((acc, n) => acc + +n.dataset.price, 0);

<style>
div{font-weight: bold}
div::before {
    content: attr(data-1);
    font-weight: normal;
}
div::after {
    content: attr(data-2);
    font-weight: normal;
}
</style>

<div data-1="Вот он" data-2="текст!">
выделенный
</div>

Результат:

Нужно всё сделать жирным - заполните тем же текстом data-1 и выведите в ::before, а текст из основного контента - просто уберите.
+АВТО-БОНУС: защита от простого копирования "мышкой"!

Под одной строкой вы подразумеваете однократное обращение к элементу, да?

Object.assign(document.querySelector('#block').style, {
  opacity: '1',
  border: '1',
  color: 'black',
});

https://learn.javascript.ru/styles-and-classes#стр...

document.getElementById('block').style.cssText= `
    opacity: 1;
    border: 1;
    color: black;
`

сделай через псевдо класс after
jsfiddle.net/f48ZD/114

потому что отсутствуют content и display

Вот так?

https://jsfiddle.net/2kde89mv/11/