html - CSS:防止 Unicode 字符的 'font-size' 增加其父容器维度

Question

我想增加“...”unicode 字符的大小，同时保持其父容器的尺寸。

#more-with-increased-size { font-size: 2rem }

<div><p>I want this parent's dimension but with increased size of the 3 dots..</p> 
<button id="more-original">
            &#8230;
          </button></div>
<br>
<div>The size of the 3 dots here is right, but the parent container has become too big...</div>
<button id="more-with-increased-size">
            &#8230;
          </button>

Answer 1

我认为这就是您所追求的。在框上设置 0 行高和最大宽度。您可能想要摆弄其他属性以尝试匹配浏览器的默认外观。

#more-with-increased-size { max-width: 40px; max-height:40px; }
#more-with-increased-size span{ font-size: 2rem; line-height:0px; }

<div><p>I want this parent's dimension but with increased size of the 3 dots..</p> 
<button id="more-original">
            &#8230;
          </button></div>
<br>
<div>The size of the 3 dots here is right, but the parent container has become too big...</div>
<button id="more-with-increased-size">
            <span>&#8230;</span>
          </button>