1

If a div is single-line, i want its height is 80px.

Else if it is multi-line, i want its padding-top-bottom is 20px.

I have tried to do this:

div {
  min-height: 40px;
  padding: 20px 0;
}

But,it works not well in the following single-line cases in the iPhone browser：

<div>中文abc</div>
<div>123abc</div>

If the innerHTML contains Chinese,the div's height will exceed 80px.

So,is there any other way?

aweiu
  • 390
  • 4
  • 12
  • `If the innerHTML contains Chinese,the div's height will exceed 80px.` You are wrong or not sufficiently describing your problem. `
    中文abc
    ` with the css you gave has the exact height of 80px in all (reasonable) browsers. http://plnkr.co/edit/5f7aoX2ghJkaq0t4Z5o3?p=preview     – ippi Mar 26 '17 at 05:00
  • sorry,I forgot to say that this would happen in the iPhone browser – aweiu Mar 26 '17 at 05:04
  • 1
    the height of div actually depends on font size as long as you're not forcing the height and setting overflow-hidden or something – mehulmpt Mar 26 '17 at 05:07
  • There is also `max-height` – ippi Mar 26 '17 at 05:09
  • the point is why the div's height is different when the FontSize is same – aweiu Mar 26 '17 at 05:10
  • I believe it's because the font-size is *actually* not the same. http://stackoverflow.com/questions/2545542/font-size-rendering-inconsistencies-on-an-iphone might help you out. – ippi Mar 26 '17 at 05:28

0 Answers0