CODEWITHSUNDEEP
htmlcss
kyw
kyw

Reputation: 7555

CSS: Prevent 'font-size' of a Unicode character from increasing its parent container dimension

I want to increase the size of the '…' unicode character while maintaining its parent container's dimension.

#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>

Upvotes: 2

Views: 355

Answers (2)

Sergiy T.
Sergiy T.

Reputation: 1453

You may try this style:

#more-with-increased-size {
    font-size: 2rem;
    line-height: 0;
    padding-bottom: 1rem;
}

It sets line height to 0 and adds padding for button so dots will be inside.

#more-with-increased-size { 
    font-size: 2rem;
    line-height: 0;
    padding-bottom: 1rem;
}
<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>

Upvotes: 0

Squiggs.
Squiggs.

Reputation: 4474

I think this is kind of what you are after. Setting 0 line height and max width on the boxes. You may want to fiddle with additional properties to try and match the browser default look. 

#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>

Upvotes: 1

Related Questions