css table 텍스트 줄 바 꾸 기

등급: http://www.zhiwenweb.cn/Category/Website/1086.html
 
CSS 제어 텍스트 내용 줄 바 꾸 기: word - wrap, word - break, white - space, text - over flow 의 차이 와 용법 은 div 에서 텍스트 레이아웃 이 자주 나타 나 고 줄 바 꾸 기 가 혼 란 스 러 운 상황 입 니 다.우리 가 자주 만 나 는 문 제 는 다음 과 같다.          1. 전체 영문 문자열 이 라면 중간 에 어떠한 기호 (빈 칸 포함) 도 포함 되 지 않 고 줄 을 자동 으로 바 꾸 지 않 습 니 다.          2. 중국어 와 영문 을 섞 어 쓰 면 영어 문자열 의 시작 부분 에서 줄 을 바 꾸 고 (영어 길이 > div 길이) 끝 부분 에 줄 을 바 꾸 지 않 습 니 다.          3. 영어 단어 전 체 를 줄 을 바꾼다.등등, 또 몇 가지 문제 가 있 을 수 있 습 니 다. 여 기 는 흔히 볼 수 있 는 몇 가지 만 열거 되 어 있 습 니 다.위의 몇 개의 css 속성 은 우리 가 이 문제 들 을 조율 하고 해결 하 는 데 도움 을 줄 수 있다.각 기능 의 간단 한 용법 소개:

word-wrap:normal | break-word; (    )
         normal:      .（             ）. 
         break-word:         (         ，                  。)  

 

word-break:normal | break-all | keep-all (    )
           normal:               ,          ,  :                 ,           ,         ,          . 
           break-all :     ,        
           keep-all :       。                         ,         ,  :        .         ,           ,         ,          . 

 

text-overflow:clip | ellipsis  (    )
             clip : 　       （...），       
             ellipsis : 　         （  width  ）      （...）

 

white-space: normal | pre | nowrap  (     )
normal   。         。 
pre          。        HTML    <pre>   。 
nowrap       ，           ，     <br>     。 
（       ，    float：none            ，             style    white-space: nowrap）

 

    : word-break:break-all;

     : 
.body{ 
       word-wrap:break-word; 
       word-break:keep-all; 
       overflow:hidden; 
} 

.css{
      text-overflow:ellipsis;
      white-space:nowrap;
      overflow:hidden;
}

 IE 와 Firefox 는 그것 을 긴 단어 로 보기 때문에 자동 으로 줄 을 바 꾸 지 않 습 니 다. IE 에 대해 서 는 IE 만 의 CSS 속성 워드 - wrap 을 통 해 자동 으로 줄 을 바 꿀 수 있 습 니 다. 워드 - wrap: break - ord;Firefox 에 대해 CSS 2 표준 은 word - wrap 과 유사 한 속성 을 정의 하지 않 았 습 니 다. overflow 속성 을 통 해 버 티 는 부분 을 숨 길 수 있 습 니 다. overflow: hidden 차이 분석: word - break - all 과 word - wrap: break - ord 는 DIV 와 같은 용 기 를 자동 으로 바 꿀 수 있 습 니 다.이들 의 차 이 는 다음 과 같다. 1. 워드 - break: break - all, 예 를 들 어 div 너비 200 px, 그 내용 은 200 px 로 자동 으로 줄 을 바꾼다. 이 줄 의 끝 에 영어 단어 가 길 면 (congratulation 등) 단 어 를 절단 하여 이 줄 의 끝 을 conra (congratulation 의 앞부분) 로 바 꾸 고 다음 행동 tulation (conguatulation) 의 백 엔 드 부분 으로 바꾼다.2. 워드 - wrap: break - ord 예 는 위 와 같 지만 차이 점 은 congratulation 전체 단 어 를 하나의 전체 로 보 는 것 입 니 다. 이 줄 의 끝 너비 가 전체 단 어 를 표시 하지 않 으 면 자동 으로 전체 단 어 를 다음 줄 에 놓 고 단 어 를 자 르 지 않 습 니 다.3，word-break;break - all 지원 버 전: IE5 이상 이 행 위 는 아시아 언어의 normal 과 같 습 니 다.아시아 언어 가 아 닌 텍스트 줄 의 임의의 글자 에서 도 끊 을 수 있 습 니 다.이 값 은 비 아시아 텍스트 를 포함 하 는 아시아 텍스트 에 적합 합 니 다.WORD - WRAP: break - ord 지원 버 전: IE 5.5 이상 의 내용 은 경계 내 에서 줄 을 바 꿉 니 다.필요 하 다 면, 단어 내 줄 바 꾸 기 (word - break) 도 발생 할 것 이다.표 가 열 리 지 않도록 자동 으로 줄 을 바꾼다.word - break: normal | break - all | keep - all 매개 변수: normal: 아시아 언어 와 비 아시아 언어의 텍스트 규칙 에 따라 글자 안에서 break - all 을 바 꿀 수 있 습 니 다. 이 행 위 는 아시아 언어의 normal 과 같 습 니 다.아시아 언어 가 아 닌 텍스트 줄 의 임의의 글자 에서 도 끊 을 수 있 습 니 다.이 값 은 비 아시아 텍스트 를 포함 하 는 아시아 텍스트 keep - all: 모든 비 아시아 언어의 normal 과 같 습 니 다.중국어, 한국어, 일본어 에 대해 서 는 글자 가 끊 어 지 는 것 을 허락 하지 않 습 니 다.아시아 텍스트 를 소량 포함 하 는 비 아시아 텍스트 문법: word - wrap: normal | break - ord 매개 변수: normal: 내용 이 지정 한 용기 경 계 를 열 수 있 도록 합 니 다 break - ord: 내용 은 경계 내 에서 줄 을 바 꿉 니 다.필요 하 다 면 단어 내 줄 바 꾸 기 (word - break) 에서 도 설명 이 발생 합 니 다. 설정 이나 검색 이 지정 한 용기 의 경 계 를 초과 할 때 줄 을 끊 을 지 여부 입 니 다.대응 하 는 스 크 립 트 특성 은 wordWrap 입 니 다.제 가 쓴 다른 도서 목록 을 참조 하 세 요.문법: table - layout: auto | fixed 매개 변수: auto: 기본 자동 알고리즘.레이아웃 은 각 셀 의 내용 을 기반 으로 합 니 다.표 는 모든 셀 에서 계산 을 읽 은 후에 야 표 시 됩 니 다.속도 가 느 린 fixed: 고정 레이아웃 의 알고리즘.이 알고리즘 에서 수평 레이아웃 은 표 의 너비, 표 테두리 의 너비, 칸 간격, 열의 너비 만 을 바탕 으로 하고 표 의 내용 과 무관 하 게 표 의 레이아웃 알고리즘 을 설정 하거나 검색 합 니 다.대응 하 는 스 크 립 트 특성 은 tableLayout 입 니 다.개인 적 인 견해: word - break 에서 3C 검 측 을 사용 하면 문제 가 표 시 됩 니 다. 이 속성 은 OPERA FIREFOX 브 라 우 저 도 지원 하지 않 습 니 다.word - break 속성 은 white - space: normal 을 사용 할 수 있 습 니 다.대신, 이렇게 하면 FireFox 와 IE 아래 에서 줄 을 정확하게 바 꿀 수 있 으 며, 단어 간 의 빈 칸 은 대체 할 수 없 으 며, 그렇지 않 으 면 줄 을 정확하게 바 꿀 수 없다 는 것 을 주의해 야 한다.