css文字需要换行怎么垂直,自动换行填充CSS中的垂直空间

最新推荐文章于 2023-02-13 21:26:18 发布

设计师石空

最新推荐文章于 2023-02-13 21:26:18 发布

阅读量418

点赞数

文章标签： css文字需要换行怎么垂直

var container = document.getElementById('container');

var paragraph = document.getElementById('paragraph');

var containerHeight = container.offsetHeight - 40; /* 40 is for 2 x parent padding */

var paragraphHeight = paragraph.offsetHeight;

/* This is needed to extract and seperate number from "px"; FYI there are other ways to do this, but this works for demo purposes. */

var paragraphStyle = window.getComputedStyle ? getComputedStyle(paragraph, null) : paragraph.currentStyle;

var paragraphInitialMaxWidth = parseInt(paragraphStyle.maxWidth, 10);

console.log("-------------");

console.log("Container initial height: " + containerHeight);

console.log("Paragraph initial height: " + paragraphHeight);

console.log("Paragraph initial max-width: " + paragraphInitialMaxWidth);

checkHeight();

function checkHeight() {

paragraphHeight = paragraph.offsetHeight;

if (paragraphHeight > containerHeight) {

while (paragraphHeight > containerHeight) {

paragraph.style.maxWidth = parseInt(paragraphStyle.maxWidth, 10) + 1 + "px";

paragraphHeight = document.getElementById('paragraph').offsetHeight;

}

} else {

paragraph.style.maxWidth = paragraphInitialMaxWidth + "px";

paragraphHeight = paragraph.offsetHeight;

}

console.log("New paragraph computed height: " + paragraph.offsetHeight);

console.log("New paragraph max-width: " + parseInt(paragraphStyle.maxWidth, 10));

}

document.getElementById('button1').onclick = function() {

checkHeight();

}

document.getElementById('button2').onclick = function() {

paragraph.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt euismod augue, ut aliquam velit dapibus at. Nullam ultrices accumsan nulla, non pharetra metus. Phasellus finibus blandit sem, ac ultrices arcu posuere in. Phasellus nibh leo, vulputate quis est a, auctor tincidunt arcu. Mauris rutrum turpis sed magna lacinia, quis placerat magna vulputate. Integer augue eros, feugiat et ipsum sit amet, ullamcorper lacinia nisi. Cras id urna ac massa laoreet ornare quis at lacus. Pellentesque in erat eros. Aliquam dignissim mollis mi, a placerat nibh sollicitudin vel. Vivamus accumsan ultricies eleifend. Suspendisse semper feugiat ex. Curabitur sagittis tempor lorem. Cras a volutpat erat. Quisque mattis ultrices orci vel condimentum. Donec imperdiet mauris vitae nisl sodales, non fermentum dolor eleifend. Suspendisse rhoncus turpis lacus, ac vestibulum ante facilisis id. Vivamus vestibulum tellus quis odio elementum aliquam. Quisque id magna nibh. Phasellus ac dignissim mauris. Curabitur rhoncus ultricies libero non efficitur. Nulla posuere, lectus tristique tincidunt dapibus, diam velit maximus ligula, nec gravida nisl sem sed nisl. Nam in vulputate libero. Quisque aliquet, quam non sagittis luctus, libero elit iaculis risus, et sollicitudin ligula augue id erat. Mauris consectetur risus vitae arcu condimentum pulvinar. Curabitur sit amet orci vel massa eleifend tempus non id elit. Integer a ante a arcu fringilla congue. Maecenas ante sapien, imperdiet ac dictum ut, sodales ut erat. Phasellus et scelerisque tortor. Nunc pulvinar nisl id massa imperdiet, ut ullamcorper ipsum consectetur. Maecenas porttitor tristique volutpat. Integer a justo vitae felis pellentesque pretium. Etiam congue, turpis in vulputate tristique, orci enim tincidunt sapien, ac dictum lacus ex ut ex. Duis nec gravida magna, feugiat volutpat eros. In hac habitasse platea dictumst. Morbi sit amet orci a nisi viverra molestie. Quisque sodales velit a ex tincidunt vehicula. Etiam sodales efficitur velit, sed auctor tellus auctor eu. Curabitur aliquam dui ac tellus feugiat, nec mollis leo auctor. Maecenas malesuada rhoncus arcu sed condimentum. Cras sem arcu, tempus eu arcu ac, condimentum efficitur augue. Cras posuere magna quis nisl blandit tincidunt. Maecenas elementum turpis et risus viverra semper. Nullam libero elit, fermentum ullamcorper placerat quis, malesuada vel velit. Fusce tempus lacinia velit nec consequat. Donec gravida, dui eget elementum posuere, massa mi posuere nisi, vel tempus sem turpis vitae metus. Morbi egestas elit quis velit aliquam, et imperdiet felis condimentum. Sed eget euismod massa. Phasellus id dictum elit. Pellentesque imperdiet, mauris semper vehicula porta, nisi nulla sagittis turpis, vitae posuere nisl magna vel urna.";

checkHeight();

}

#container {

background-color: pink;

border: 3px solid red;

height: 400px;

padding: 20px;

overflow: auto;

}

#paragraph {

max-width: 300px;

margin: 0 auto;

text-align: center;

}

Short text

Long text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt euismod augue, ut aliquam velit dapibus at. Nullam ultrices accumsan nulla, non pharetra metus. Phasellus finibus blandit sem, ac ultrices arcu posuere in. Phasellus nibh leo, vulputate quis est a, auctor tincidunt arcu. Mauris rutrum turpis sed magna lacinia, quis placerat magna vulputate. Integer augue eros, feugiat et ipsum sit amet, ullamcorper lacinia nisi. Cras id urna ac massa laoreet ornare quis at lacus. Pellentesque in erat eros. Aliquam dignissim mollis mi, a placerat nibh sollicitudin vel. Vivamus accumsan ultricies eleifend. Suspendisse semper feugiat ex. Curabitur sagittis tempor lorem. Cras a volutpat erat. Quisque mattis ultrices orci vel condimentum. Donec imperdiet mauris vitae nisl sodales, non fermentum dolor eleifend.