> 백엔드 개발 > PHP 튜토리얼 > 14. CSS - 긴 문자열이 너비를 초과하면 자동으로 줄 바꿈

14. CSS - 긴 문자열이 너비를 초과하면 자동으로 줄 바꿈

WBOY
풀어 주다: 2016-07-29 08:56:22
원래의
1716명이 탐색했습니다.

1. 관련 정보

php에서 긴 문자열 출력 시(문자열에 줄 바꿈이 없음) 내용이 설정된 길이를 초과하면 문자열이 자동으로 줄 바꿈되기를 바랍니다. 그렇지 않으면 개행 기호가 없는 문자열은 설정된 너비를 초과하여 페이지가 무한히 늘어납니다

순수 HTML 코드에서는 특별한 선언이 없어도 설정된 너비에 따라 자동으로 줄 바꿈됩니다. 예를 들어

<code><span><<span>div</span><span>style</span>=<span>"width: 100px;"</span>></span>
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
<span></<span>div</span>></span></code>
로그인 후 복사

위 코드는 콘텐츠 너비가 100px을 초과하면 자동으로 출력을 줄 바꿈합니다

그러나 긴 PHP 문자열을 출력할 때는

<code><span><<span>div</span><span>style</span>=<span>"width: 100px;"</span>></span><span><span><?php</span><span>echo</span><span>$long_content</span>; <span>?></span></span><span></<span>div</span>></span></code>
로그인 후 복사

여기서의 크기가 100px을 훨씬 넘는 것을 보면 내용 출력이 자동으로 줄 바꿈되지 않는 것을 볼 수 있습니다. 즉, 문자열의 너비에 따라 페이지가 무한히 늘어납니다. 정의된 너비 모양 가짜라면 당연히 예상한 것과 다릅니다$long_content

2. 문제 설명

긴 문자열을 출력할 때 내용이 자동으로 줄 바꿈되지 않고 페이지가 무한히 늘어납니다

3 , 솔루션

다음 CSS 정의를 사용하십시오.

<code><span><<span>div</span><span>style</span>=<span>"width: 100px; word-break: break-all;word-wrap: break-word;"</span>></span><span><span><?php</span><span>echo</span><span>$long_content</span>; <span>?></span></span><span></<span>div</span>></span></code>
로그인 후 복사
  1. 속성은 자동 줄 바꿈 처리 방법을 지정하고 값은 word-break 단어 내 줄 바꿈이 허용됨을 나타냅니다. break-all
  2. 속성을 ​​사용하면 긴 단어나 URL 주소를 다음 줄로 줄 바꿈할 수 있습니다. word-wrap 값은 긴 단어나 URL 주소 내에서 줄 바꿈하는 것을 의미합니다. break-word
').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i ').text(i)); }; $numbering.fadeIn(1700); }); }); 위에서 14. CSS를 소개했습니다. 내용을 포함하여 너비를 초과하면 긴 문자열을 자동으로 래핑합니다. PHP 튜토리얼에 관심이 있는 친구들에게 도움이 되기를 바랍니다.

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