para에서 더 큰 첫 번째 단어를 허용하려면 두 행을 들여 쓰기해야했습니다. 번거로운 일회성 솔루션은 SVG 요소에 텍스트를 배치하고 <img>와 동일하게 배치하는 것입니다. float 및 SVG의 높이 태그를 사용하여 들여 쓰기 할 행 수를 정의합니다.
<p style="color: blue; font-size: large; padding-top: 4px;">
<svg height="44" width="260" style="float:left;margin-top:-8px;"><text x="0" y="36" fill="blue" font-family="Verdana" font-size="36">Lorum Ipsum</text></svg>
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
- SVG의 높이와 너비는 차단 된 영역을 결정합니다.
- Y = 36은 SVG 텍스트 기준선의 깊이이며 글꼴 크기와 동일합니다.
- margin-top은 SVG 텍스트와 para 텍스트의 최상의 정렬을 허용합니다.
- 여기서 처음 두 단어를 사용하여 하강기에 필요한 관리를 상기했습니다.
예, 번거롭지 만 포함하는 div의 너비와 무관합니다.
위의 대답은 para의 첫 번째 단어가 더 크고 두 행 위에 배치되도록 내 자신의 쿼리에 대한 것입니다. para의 처음 두 줄을 간단히 들여 쓰려면 모든 SVG 태그를 다음 단일 픽셀 이미지로 바꿀 수 있습니다.
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="float:left;width:260px;height:44px;" />