> 웹 프론트엔드 > CSS 튜토리얼 > 공백 없이 요소 안에 텍스트를 어떻게 배치합니까?

공백 없이 요소 안에 텍스트를 어떻게 배치합니까?

DDD
풀어 주다: 2024-11-10 14:56:03
원래의
970명이 탐색했습니다.

How Do I Wrap Text Inside a <td> 공백이 없는 요소? 
공백이 없는 요소? " />

텍스트 내에 공백을 허용하지 않고 요소 내부에서 텍스트를 감싸려면 다음과 같이 하세요. 연속적인 문자 시퀀스의 경우 여러 CSS 속성을 활용할 수 있습니다.

단어 분리: break-all 속성을 사용하면 문자 내에서도 단어를 끊을 수 있습니다. 그러나 이 속성만으로는 모든 브라우저에서 충분하지 않을 수 있습니다.

호환성을 보장하고 원하는 래핑 동작을 달성하려면 다음과 같은 추가 속성의 조합을 적용할 수 있습니다. 🎜>

    공백: -moz-pre-wrap !important;: Mozilla 브라우저
  • 공백: -webkit-pre-wrap;: Chrome 및 Safari 브라우저
  • white-space: -pre-wrap;: Opera 4-6 브라우저
  • white-space: -o-pre-wrap; : Opera 7 브라우저
  • white-space: pre-wrap;: CSS3 호환 브라우저
  • word-wrap: break-word;: Internet Explorer 5.5 브라우저
또한 모든 브라우저에서 올바른 래핑을 보장하기 위해 공백: 일반; 속성을 최종 선언으로 포함해야 합니다.

이 솔루션을 구현하려면 다음 CSS 클래스를 요소:

.wrapword {
    white-space: -moz-pre-wrap !important;  
    white-space: -webkit-pre-wrap;          
    white-space: -pre-wrap;                 
    white-space: -o-pre-wrap;               
    white-space: pre-wrap;                  
    word-wrap: break-word;                  
    word-break: break-all;
    white-space: normal;
}
로그인 후 복사
그런 다음 감싸고 싶은 텍스트를 class="wrapword" 속성이 있는 요소:

위 내용은 공백 없이 요소 안에 텍스트를 어떻게 배치합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿