CSS를 사용하여 텍스트를 행으로 표시하는 방법
- coldplay.xixi원래의
- 2021-03-11 16:35:155942검색
CSS에서 텍스트를 행으로 표시하는 방법: 1. [writing-mode] 속성을 사용합니다. 구문은 [writing-mode:lr-tb 또는 writing-mode:tb-rl]입니다. 2. 텍스트 너비 개체는 다음 텍스트의 너비 거리만 설정할 수 있습니다.
이 튜토리얼의 운영 환경: windows7 시스템, CSS3 버전, DELL G3 컴퓨터.
텍스트를 행으로 표시하는 Css 방법:
방법 1: 쓰기 모드 속성 사용
구문:
writing-mode:lr-tb或writing-mode:tb-rl
매개변수: lr-tb: 왼쪽에서 오른쪽으로, 위에서 아래로; 위에서 아래로, 오른쪽에서 왼쪽으로.
<!DOCTYPEhtml>
<html>
<head>
<title>test</title>
<metacharset="UTF-8">
</head>
<style>
.one{
margin:0auto;
height:140px;
writing-mode:vertical-lr;/*从左向右从右向左是writing-mode:vertical-rl;*/
writing-mode:tb-lr;/*IE浏览器的从左向右从右向左是writing-mode:tb-rl；*/
}
</style>
<body>
<divclass="one">十轮霜影转庭梧，此夕羁人独向隅。
未必素娥无怅恨，玉蟾清冷桂花孤。</div>
</body>
</html>이 방법은 호환성이 좋지 않고 IE 브라우저에서만 지원되므로 여기서는 소개하지 않겠습니다. 자세한 내용은 CSS 온라인 설명서를 참조하세요.
CSS 텍스트를 세로로 표시하는 방법 2:
텍스트 개체의 너비를 설정하면 다음 텍스트의 너비 거리만 정렬할 수 있으므로 텍스트가 한 줄에 두 문자를 넣을 수 없으므로 텍스트가 자동으로 포장하여 수직 조판이 필요합니다.
<!DOCTYPEhtml>
<html>
<head>
<title>test</title>
<metacharset="UTF-8">
</head>
<style>
.one{
width:52px;
margin:0auto;
line-height:56px;
font-size:50px;
}
</style>
<body>
<divclass="one">中秋月</div>
</body>
</html>참고: word-wrap:break-word;/*줄을 자동으로 줄 바꿈하려면 이 문장을 영어로 추가해야 합니다*/
추천 튜토리얼: CSS 비디오 튜토리얼
위 내용은 CSS를 사용하여 텍스트를 행으로 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.