Question

我想根据字符数设置段落的宽度。为此我使用:nth-last-of-type()单位。问题是当我更改font-family时，似乎ch单位使用了等宽基础。

是否有一种方法（仅使用CSS / HTML）设置字符宽度，无论（适用于每个）字体系列？

Answer 1

不确定CSS解决方案，但

你可以使用JavaScript来做这件事，但这不太方便。

在此演示： https://jsbin.com/fecevopara/1/edit?html,css,js,console,output

尝试更改html中的文字以查看宽度的变化情况。

＆＃13;

const container = document.getElementById('container')

const textLength = container.innerText.length

if (textLength > 10) {
  container.style.width = '50px'
}
if (textLength > 20) {
  container.style.width = '100px'
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="container" style="display: inline-block; width: 10px; background: #ccc">
   Some text goes hereeeee
  </div>
</body>
</html>

＆＃13;

JavaScript代码（只是示例创意，而不是生产就绪）：

const container = document.getElementById('container')

const textLength = container.innerText.length

if (textLength > 10) {
  container.style.width = '50px'
}
if (textLength > 20) {
  container.style.width = '100px'
}

和HTML看起来像这样：

<div id="container" style="display: inline-block; width: 10px; background: #ccc">
   Some text goes hereee
</div>

基本上它会根据里面的字符数动态改变容器的宽度样式属性。

如何根据字符设置宽度

1 个答案: