简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

CSS如何实现文字竖排效果

PHP中文网
풀어 주다： 2017-06-05 14:33:25
원래의
3212명이 탐색했습니다.

CSS如何实现文字竖排效果:
文字竖排虽然不常用，但是并不是没有这方面的需求，但是现有的CSS属性支持度都不高或者兼容性不好，确实没有找到合适的方法来实现此效果，下面就分享一个用javascript实现的效果，大家可以借鉴一下，效果非常的好。代码实例如下:

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> 
<meta name="author" content="www.51texiao.cn/" /> 
<title>蚂蚁部落</title> <style type="text/css">
 span{   float:right;   width:1em;   text-align:center;   word-wrap:break-word;   background:#ccf;   margin:0 5px; } </style> <script type="text/javascript">
 function shuPai(eid){   var p = document.getElementById(eid);   var str=p.innerHTML.replace(/<[^>]+>/gi,"");   var arr = str.replace(/(.{1,10})/g,"<span>$1</span>");  
 p.innerHTML = arr; } window.onload=function(){shuPai("test");} </script> </head> <body>  
 <p id="test">文字竖排虽然不常用，但是并不是没有这方面的需求，但是现有的CSS属性支持度都不高或者兼容性不好。
</p> 
</body> 
</html>
로그인 후 복사

以上代码完美的实现了想要的效果，可以直接套用就可以了，如果感谢兴趣可以自行分析一下代码。

관련 라벨：
CSS，文字竖排
원천：php.cn
이전 기사：html学习-_html/css_WEB-ITnose 다음 기사：border:0和border:none的区别是什么_html/css_WEB-ITnose
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
컨테이너에서 두 번째 div만 오른쪽으로 띄우고 너무 긴 경우 첫 번째 div를 래핑하는 방법 텍스트와 데이터가 포함된 행이 있습니다. 텍스트 상자는 왼쪽으로 정렬되어야 하며 text-alignleft로 정렬되어야 합니다. 숫자 상자는 오른쪽 정렬되어야 하...
에서 2023-09-15 12:28:31
0
1
331
div에서 버튼 요소를 수직으로 정렬할 때 CSS 여백으로 정의된 것보다 요소의 수직 공간이 더 많은 이유는 무엇입니까? 이 사이트에 진행 중인 작업 페이지가 있는데 이 페이지에서 가장 어려운 부분이 결과 필터링을 위한 스크립트와 스타일일 것이라고 생각했지만 실제로 필터링 부분은 예...
에서 2023-09-14 18:49:41
0
2
252
Bootstrap Grid 시스템을 사용하여 대형 화면에서 이미지와 진행률 표시줄 사이의 간격을 수정하는 방법은 무엇입니까? 먼저 이 그림의 아이디어를 보여드리겠습니다. 그림(1) 이 그림에서 우리는 md/lg 화면에서 진행률 표시줄이 그림 아래에 있고 텍스트가 그림 오른쪽에 있는 것을...
에서 2023-09-14 10:56:03
0
1
335
WordPress 테마의 function.php 파일에 글꼴 스타일을 추가할 수 없습니다. 그래서 저는 WordPress용 사용자 정의 테마를 만들고 사이트의 스타일을 사이트에 로드하려고 합니다. CSS 스타일은 사이트에 성공적으로 로드되지만 글꼴 스타...
에서 2023-09-10 22:09:17
0
1
291
HTML: 오름차순으로 다음 페이지로 이동하는 방법은 무엇입니까? Project라는 폴더에 다음과 같이 숫자 이름을 가진 HTML 파일이 있습니다. 230512.html230519.html230530.html230630.html...
에서 2023-09-10 21:41:36
0
1
243
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！