包装文字以填充CSS中的垂直空间

Question

在网络上，如何在填充水平空间之前在固定高度的容器中填充文本以填充垂直空间？ （理想情况下，没有Javascript）

Answer 1

css：

 h1 {
  text-align: center;
  font-family: 'Bowlby One SC', cursive;

}

JS：

jQuery("h1").fitText(0.38);

Answer 2

您需要使用内联css进行操作，而这并不是简单或完美的事情。

基本上，您需要估计可能适合整个容器的字符数。然后，每次显示时，计算一下您拥有的字符并执行current_chars / max_chars

之类的操作。

例如

max_chars = 1000

Current_chars = 500

500/1000 = 0.5

向左填充：25％ 右填充：25％

类似的东西

Answer 3

您是否可以在CSS中实现此功能值得怀疑。

作为参考，这是一个有效的JS解决方案。它可能有一些多余的绒毛，但可以起作用。

基本上对照父级检查段落高度，将其递增1px，直到其适合固定高度为止。如果没有更多的水平空间（例如在移动视图中），它将通过overflow: auto;自动滚动。

Codepen

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() {
   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.";
  
  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;
}

<button id="button1">Short text</button>
<button id="button2">Long text</button>
<div id="container">
    <p id="paragraph">
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.</p>

</div>