HTML 줄 높이에 영향을 미치는 태그, 일관성을 유지하는 방법?
나는이있는 경우 <sup>여러 줄에 태그 <p>무엇 라인 높이의 태그는 다른 라인보다 그 위에 간격보다 큰 라인을 가지고에 첨자와 라인, 선명하게 촬상을 내가 입고 <p>.
설명 편집 : 나는 <p>각각 한 줄에있는 많은을 가지고 있다는 것을 의미하지는 않습니다 . <p>여러 줄에 줄 바꿈하기에 충분한 내용 의 단일 항목 이 있습니다. 어딘가에 텍스트 (어디서나)이있을 수있다 <sup>나 <sub>. 이는 위 / 아래에 여분의 간격을 추가하여 해당 행의 행 높이에 영향을줍니다. 더 큰 선 높이를 설정 <p>하면 문제와 아무런 차이가 없습니다. 줄 높이는 증가하지만 여분의 간격은 여전히 남아 있습니다.
어떻게 일관성을 유지할 수 <sup>있습니까? 즉, 모든 줄의 포함 여부에 상관없이 모든 줄의 간격이 동일 합니까?
솔루션은 브라우저 간이어야합니다 (IE 6+, FF, 사파리, 오페라, 크롬)
line-height는 그것을 고치지 만 꽤 크게 만들어야 할 수도 있습니다. 내 설정에서 <sup>더 이상 방해하지 않기 전에 선 높이를 약 1.8로 늘려야 하지만 글꼴마다 다릅니다.
일관된 줄 높이를 얻는 한 가지 방법은 기본값 대신 고유 한 위첨자 스타일을 설정하는 것 vertical-align: super입니다. top이것을 사용 하면 라인 상자에 아무것도 추가되지 않지만 글꼴 크기를 더 줄여서 적합하게 만들 수 있습니다.
sup { vertical-align: top; font-size: 0.6em; }
시도 할 수있는 또 다른 해킹은 위치 지정을 사용하여 행 상자에 영향을 미치지 않고 위치를 조금 위로 올리는 것입니다.
sup { vertical-align: top; position: relative; top: -0.5em; }
물론 선 높이가 충분하지 않으면 위의 선으로 충돌 할 위험이 있습니다.
sup {
font-size: 0.83em;
vertical-align: super;
line-height: 0;
}
요령은 <sup>의 행 높이를 0 으로 설정하는 것입니다. @Scott는 보통을 사용한다고 말했지만 항상 작동하지는 않습니다.
즉 , 위 첨자 텍스트를 수용하기 위해 주변 텍스트의 줄 높이 를 변경할 필요가 없습니다 . IE7 +와 다른 주요 브라우저에서 이것을 테스트했습니다.
나는 같은 문제가 있었고 주어진 대답 중 하나가 효과가 없었습니다. 그러나 나는 나를 위해 일한 수정 프로그램 으로 git commit 을 발견했다 .
sup {
font-size: 0.8em;
line-height: 0;
position: relative;
vertical-align: baseline;
top: -0.5em;
}
쉽게 유지 :
sup { vertical-align: text-top; }
[ 개별 서체에 따라 글꼴 크기 ]
length수직 정렬에 사용하는 것을 선호합니다 . 이렇게하면 요소의 기준선이 부모의 기준선 위에 지정된 길이로 정렬됩니다.
sup {
font-size: .83em;
vertical-align: 0.25em;
line-height: 0;
}
<sup>태그가 두 줄 사이의 간격에 영향을 미치는 이유 는 여러 가지 요소와 관련이 있습니다. 요소는 다음과 같습니다. 줄 높이, 일반 글꼴과 관련된 위 첨자 크기, 위 첨자의 줄 높이 및 마지막으로 위 첨자의 맨 아래가 무엇인지 ... 설정 한 경우 ... 줄 높이 일반 텍스트의 "터널 밴드"(즉, 내가 부르는 것)가 135 % 인 다음 일반 텍스트 (100 %)는 35 %의 흰색으로 채워집니다. 단락의 경우 다음과 같습니다.
p
{
line-height: 135%;
}
If you then do not white pad the superscript...(i.e. keep its line height to 0) the superscript only has the width of its own text... if you then ask the superscript to be a percentage of the regular font (for example 70%) and you align it with the middle of the regular text (text-middle), you can eliminate the problem and get a superscript that looks like a superscript. Here it is:
sup
{
font-size: 70%;
vertical-align: text-middle;
line-height: 0;
}
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub {
top: 0.4em;
}
To make all lines taller, to look the same as the line with the superscript, define a larger line-height for the entire paragraph
<p style='line-height:150%'>
or whatever value gives the effect you desire.
It may look strange, but that's how you described your requirements.
EDIT: In order to make all lines look the same when only one needs more vertical space than the others, ALL lines in the paragraph will have to be taller.
This, as I said, may not an attractive solution. Maybe something can be done with a span making just the text with the sub/superscript smaller, apart from that I don't believe what you want can be achieved. But I'd like to see someone else's solution.
EDIT2: Incidentally, I've tried a small html file containing
<html>
<head>
<title>line-height</title>
<style>
p {
line-height : 1.5em;
width : 25em;
}
</style>
</head>
<body>
<p>Mary had a little lamb, its fleece<sup>1</sup> was white as snow,
and everywhere that Mary went, the lamb<sub>2</sub> was sure to go.
</p>
</body>
</html>
And the lines are all the same height in FF3.0.14 and Konqueror (I can't speak for other browsers)
I've been using line-height: normal for the superscript, which works fine for me in Safari, Chrome, and Firefox, but I'm not sure about IE.
Specially use this on newsletter -
<sup style="font-size:9px; line-height:8px;">®</sup>
I like Milingu Kilu's solution but in the same spirit I prefer
sup { vertical-align:top; line-height:100%; }
¹, ² etc. might do the trick. it's an HTML trick to superscript
Answer from here, works in both phantomjs and in email-embedded HTML:
Lorem ipsum <sup style="font-size: 8px; line-height: 0; vertical-align: 3px">®</sup>'programing tip' 카테고리의 다른 글
| psycopg2 : 하나의 쿼리로 여러 행 삽입 (0) | 2020.07.16 |
|---|---|
| POST (ajax)를 통해 JSON 데이터를 보내고 Controller (MVC)에서 JSON 응답을받습니다. (0) | 2020.07.15 |
| 양식 데이터 전송 요청 (0) | 2020.07.15 |
| Microsoft SQL Server로 LIMIT를 구현하는 방법은 무엇입니까? (0) | 2020.07.15 |
| 폴더가없는 경우 파일과 폴더를 어떻게 만듭니 까? (0) | 2020.07.15 |