Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- 자바
- CSS3
- MariaDB
- jsp
- 스프링
- Java
- db
- 자바파일업로드
- 자바타입
- insert
- spring
- mybatis
- JSTL
- crud
- html5
- poi엑셀
- 게시판구현
- PAGING
- jquery
- select
- SQL
- pagenation
- 페이징
- poi
- 자바스크립트
- 파일업로드
- ORDERBY
- 스프링파일업로드
- 퍼블리싱
- mysql
Archives
- Today
- Total
째의 개발 기록방
text-align / word-break 속성 본문
- text-align 속성
inline 이나 inline-block 요소에서만 수직정렬을 위해 사용가능
- word-break 속성
<p>
<span>
내가 보려고 만든 javascript 복습 중 입니다.
내가 보려고 만든 javascript 복습 중 입니다.
내가 보려고 만든 javascript 복습 중 입니다.
</span>
</p>
.wrap p span{
display: inline-block;
width: 50%;
word-break: break-all; /*글자 기준으로 줄바꿈합니다.*/
word-break: break-word; /*요소의 경계에서 break point가 아니어도 줄바꿈을 합니다.*/
word-break: keep-all; /*단어 기준으로 줄바꿈합니다.*/
word-break: initial; /*기본값으로 설정합니다. */
word-break: inherit /*부모 요소의 속성값을 상속받습니다.*/
}

↑word-break : break-all / 글자 기준으로 줄바꿈합니다.

↑word-break : keep-all / 단어 기준으로 줄바꿈합니다.

↑word-break: break-word / 요소의 경계에서 break point가 아니어도 줄바꿈을 합니다.
'Front End > HTML 5, CSS 3' 카테고리의 다른 글
[html5,css3] 웹 접근성 / WAI-ARIA (0) | 2022.05.11 |
---|