track 줄 높이에 영향을 미치는 HTML<sup/> 태그, 일관성있게 만드는 방법은 무엇입니까?



table tag in html (12)

여러 줄의 <p> <sup> 태그에 <sup> 태그가있는 경우, 위 첨자가있는 줄은 다른 줄보다 큰 줄 간격을 갖습니다. 단, <p> .

설명을 위해 편집 : 나는 많은 <p> 가지고있는 것은 아니며 각각은 한 줄에있다. 하나의 <p> 에 여러 줄로 묶을 수있는 충분한 내용이 있습니다. 텍스트의 어딘가 (어디서나)에는 <sup> 또는 <sub> 가있을 수 있습니다. 이것은 위 / 아래에 추가 공백을 추가하여 해당 행의 행 높이에 영향을줍니다. <p> 에 선 두께를 더 크게 설정하면 문제가 없습니다. 선 높이가 증가하지만 여분의 간격은 여전히 ​​유지됩니다.

어떻게 일관성있게 만들 수 있습니까? 예를 들어 <sup> 포함되어 있든 없든 모든 줄의 간격은 같습니다.

솔루션은 브라우저 간 (IE 6 이상, FF, 사파리, 오페라, 크롬)이어야합니다.

https://src-bin.com


Answer #1

& sup1, & sup2 등이 트릭을 수행 할 수 있습니다. 그것은 위첨석에 HTML 속임수이다.


Answer #2

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; }

물론 라인 높이가 충분하지 않으면 위 라인에 충돌 할 위험이 있습니다.


Answer #3

나는 Milingu Kilu의 솔루션을 좋아하지만 같은 정신으로 선호한다.

sup { vertical-align:top; line-height:100%; }

Answer #4

나는 똑같은 문제가 있었고 주어진 답에 대해 비 답했다. 하지만 나를 위해 일한 수정 프로그램으로 git 커밋 을 찾았습니다.

sup {
  font-size: 0.8em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}

Answer #5

나는 세로 정렬에 length 를 사용하는 것을 선호한다. 이것에 의해, 요소의 baseline가, 그 부모의 baseline 위의 지정된 길이에 가지런 히합니다.

sup {
   font-size: .83em;
   vertical-align: 0.25em;
   line-height: 0;
}

Answer #6

라인 높이를 사용했습니다 : Safari, Chrome 및 Firefox에서 정상적으로 작동하는 위 첨자는 정상이지만 IE는 확실하지 않습니다.


Answer #7

모든 줄을 더 크게 만들려면 위 첨자가있는 줄과 똑같이 보이도록 전체 단락에 대해 더 큰 line-height 를 정의하십시오

<p style='line-height:150%'>

또는 당신이 원하는 효과를주는 모든 가치.

이상하게 보일 수도 있지만 요구 사항을 설명하는 방법입니다.

편집 : 다른 사람보다 더 많은 수직 공간이 필요할 때 모든 줄을 똑같이 보이게하려면 단락의 모든 줄 이 더 커야합니다 .

이것은 내가 말했듯이 매력적인 해결책이 아닐 수 있습니다. 아마 당신이 원하는 것을 믿을 수 없다는 점을 제외하고 하위 / 위 첨자가있는 텍스트 만 만드는 스팬으로 무언가를 할 수 있습니다. 하지만 다른 사람의 해결책을보고 싶습니다.

EDIT2 : 덧붙여, 나는 작은 HTML 파일을 포함 해봤습니다

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

그리고 FF3.0.14와 Konqueror에서는 라인이 모두 같은 높이입니다 (다른 브라우저에서는 말할 수 없습니다)


Answer #8

특별히 이것을 뉴스 레터에 사용하십시오 -

<sup style="font-size:9px; line-height:8px;">&reg;</sup>

Answer #9

<sup> 태그가 두 줄 사이의 간격에 영향을 미치는 이유는 여러 가지 요인과 관련이 있습니다. 요소는 다음과 같습니다 : 줄 높이, 일반 글꼴과 관련된 위 첨자 크기, 위 첨자의 줄 높이 및 최하위는 무엇입니까? 위 첨자의 아래쪽 줄은 무엇입니까? 설정 한 경우 ... 줄 높이 정규 텍스트가 135 %의 "터널 밴드"(즉, 내가 말하는 것)에 있으면 정규 텍스트 (100 %)는 흰색이 35 % 더 흰색으로 채워집니다. 단락의 경우 다음과 같이 보입니다.

 p
    {
            line-height: 135%;
    }

그런 다음 위 첨자를 흰색 패드로 채우지 않으면 (예 : 줄 높이를 0으로 유지) 위 첨자는 고유 텍스트의 너비 만 갖습니다 ... 그런 다음 위 첨자에 일반 글꼴의 비율 (for 예를 들어 70 %) 일반 텍스트 (텍스트 중간) 중간에 정렬하면 문제를 없애고 위 첨자 모양의 위 첨자를 얻을 수 있습니다. 여기있어:

sup
{
    font-size: 70%;
    vertical-align: text-middle;
    line-height: 0;
}

Answer #10

그것을 쉽게 지키십시오 :

sup { vertical-align: text-top; }

[ 글꼴 크기는 개인의 얼굴에 따라 다릅니다.]


Answer #11
sup {
        font-size: 0.83em;
        vertical-align: super;
        line-height: 0;
    }

트릭은 <sup> 의 줄 높이를 0으로 설정하는 것입니다. @Scott은 정상적인 사용을 말했지만, 이것이 항상 작동하는 것은 아닙니다.

즉, 위 첨자 텍스트를 수용하기 위해 주변 텍스트의 선 높이 를 변경할 필요가 없습니다 . 나는 이것을 IE7 +와 다른 주요 브라우저에서 테스트했다.


Answer #12
sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub { 
  top: 0.4em; 
}




superscript