실제에 웹 프론트 엔드 항목 : CSS의 방법은 수직 텍스트를 달성하기 위해

기본 배열에서 HTML 텍스트는 수평으로 배열하지만 텍스트를 필요로 특별한 경우에 수직으로 배치된다.

수직으로 정렬 된 한 줄의 텍스트

실제에 웹 프론트 엔드 항목 : CSS의 방법은 수직 텍스트를 달성하기 위해

.onecn{
     width: 20px;  
    margin: 0 auto;  
    line-height: 24px;  
}

실제에 웹 프론트 엔드 항목 : CSS의 방법은 수직 텍스트를 달성하기 위해

.oneen{
    width: 15px;
    margin: 0 auto;
    line-height: 24px;
    font-size: 20px;
    word-wrap: break-word;/*英文的时候需要加上这句,自动换行*/
    word-break:break-all;
}
web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)

설명 : 하나의 라인의 텍스트를 달성하기 위해 단지에 정확히 폰트 폭을 수용하도록 폭을 설정할 필요가 수직으로 배치.

줄 문자는 수직으로 배열

실제에 웹 프론트 엔드 항목 : CSS의 방법은 수직 텍스트를 달성하기 위해

.two{  
    margin: 0 auto;  
    height: 140px;  
    writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/ 
    writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl;*/  
}
web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)

설명 : 높이가 텍스트 간격 및 줄 간격을 제어해야하는 경우, 당신은 속성 자간 및 라인 높이를 추가 할 수 있습니다, 매우 중요합니다.

확장 : 수직 텍스트 애니메이션 효과 (애니메이션 캐릭터가 위에서 아래로 표시)

끝 ~~~

추천

출처blog.51cto.com/14592820/2447572