Jquery как узнать высоту блока с текстом до N символа в строке?

Question

[Cheizer]

Приветствую, подскажите пожалуйста, как решить нестандартную задачу. Опыта не хватает.

Например есть DIV с текстом. Количество символов 283
Как на JQUERY получить высоту этого блока до 100 символа?

<div class="text">
Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой.
</div>

Answer 1

[historydev]

const str = "Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой.";

const div = document.createElement("div");
div.innerText = str;

document.body.append(div)

console.log(div.clientHeight)

div.innerText = str.substr(0, 100)


console.log(div.clientHeight)

Comments

[Cheizer]

Спасибо, а как будет на JQUERY? И обязательно ли оборачивать в div?

[historydev]

Cheizer,
И обязательно ли оборачивать в div? - Любой тег: p, td, div и т.д.
Спасибо, а как будет на JQUERY? - Здесь не нужен jquery.

[Cheizer]

Владимир, Про тег у меня уже есть в верстке див с текстом, оборачивать дополнительно не нужно, я об этом. И весь код на JQUERY, выносить отдельно JS не получиться.

[historydev]

Cheizer, да, вам нужно обернуть в новый див, если вы не хотите изменять тот что на странице.

const myDiv = document.querySelector('.text')
const str = myDiv.innerText;
const div = document.createElement("div");
div.innerText = str;

[historydev]

Cheizer, выносить отдельно ничего не нужно. Это ваше jquery внешнее, а не чистый js, внедрите его куда нужно и он будет работать.

[Cheizer]

Владимир, не работает, у меня там each функция, вот так получаю контенйер $(this).find(" > .content") как это связать с const myDiv = document.querySelector('.text') ?

[historydev]

Cheizer, https://learn.javascript.ru/

$(this).find(" > .content").each(_ => {
const str = this.innerText;
const div = document.createElement("div");
div.innerText = str;

document.body.append(div)

console.log(div.clientHeight)

div.innerText = str.substr(0, 100)


console.log(div.clientHeight)
})

Как-то так это должно выглядеть, как я понял здесь в this будет .content, высота content будет получена.

[Cheizer]

Владимир, блин, спасибо большое. Но each вообще трогать не буду, там много всего и все на jquery. Я хочу понять как мне получить контейнер? Сейчас так $(this).find(" > .content"), а как на JS это будет?

[historydev]

Cheizer, document.querySelectorAll('.text .content')

[Cheizer]

Владимир, вот так делаю, в консоли тишина

const str = document.querySelectorAll('.text .content');
const div = document.createElement("div");
div.innerText = str;
document.body.append(div)
div.innerText = str.substr(0, 100)
console.log(div.clientHeight)

[historydev]

Cheizer, откройте документацию querySelectorAll.

[Cheizer]

Владимир, благодарю, я все же на Jquery попробую