Question

是否有任何纯CSS解决方法来格式化段落：

宽度和高度适合内容
在缩小或增长时保持特定的宽高比

我搜索过但只找到了不适合内容的解决方案。感谢。

编辑：添加我正在使用的代码。我试图让段落的宽高比为1：1，其大小将适合内部的文本内容（没有多余的空格）。文本内容是动态的。

HTML：

<div class="container">
  <p contenteditable="true" spellcheck="false">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at ante vitae velit tempus molestie eu ut dolor. In hac habitasse platea dictumst. </p>
</div>

CSS：

* {
  margin: 0;
  padding: 0;
}

div.container {
  width: -moz-max-content;
  width: -webkit-max-content;
  background: red;
}

p {
  width: 20%;
  text-align: center;
  background: lightblue;
}

Codepen

编辑2： 这就是我想要实现的目标，但没有javascript

const ratio = 16 / 9 // width/height aspect ratio

let p = $('p')
let lh = parseFloat(p.css('line-height'))

p.on('input', () => {
  let divW = $('div').width()
  p.width(`${(Math.sqrt(ratio*divW*lh)+lh)/divW*100}%`)
})

p.trigger('input')

div {
  width: max-content;
  width: -moz-max-content;
  width: -webkit-max-content;
  visibility: hidden;
}

p {
  padding: 1em;
  text-align: center;
  line-height: 1.2;
  background: lightblue;
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p contenteditable="true" spellcheck="false">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at ante vitae velit tempus molestie eu ut dolor.</p>
</div>

CSS - 保持段落宽高比和适合内容

0 个答案: