IE든 Firefox든 텍스트가 매우 긴 경우 경계에 도달하면 자동으로 줄바꿈됩니다. 그러나 어떤 경우에는 우리가 이것을 원하지 않습니다. 예: 웹페이지의 특정 영역에 ul li 태그를 사용하여 기사 제목 목록을 표시합니다. 각 줄의 텍스트가 자동으로 줄 바꿈되는 것을 원하지 않으면 CSS 속성 공백을 사용하여 문제를 해결할 수 있습니다. 다음 코드는 admin10000.com
에서 가져온 것입니다. 코드는 다음과 같습니다:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Web开发者网络(www.admin10000.com)</title> <style type="text/css"> ul#myList { margin:0px; padding:0px; list-style:none; border:1px solid #c10; width:400px; white-space:nowrap; overflow:hidden; } p#container { width:400px; border:1px solid #ccc; padding:10px; } </style> </head> <body> <p id="container"> <ul id="myList"> <li>Admin10000.com是WEB开发者学习交流的平台,这里提供大量实用的技术文档及相关资源下载。</li> <li>Admin10000.com是WEB开发者学习交流的平台,这里提供大量实用的技术文档及相关资源下载。</li> <li>Admin10000.com是WEB开发者学习交流的平台,这里提供大量实用的技术文档及相关资源下载。</li> </ul> </p> </body> </html>
팁:
1. li의 텍스트가 줄바꿈되지 않도록 ul 태그에 대해 CSS 속성 white-space:nowrap;을 설정합니다.
2. ul 태그에 대해 CSS 속성 Overflow:hidden을 설정하여 지정된 너비를 넘는 부분을 숨깁니다
3. ul의 너비는 IE6에서 명시적으로 지정되어야 합니다. 그렇지 않으면 모든 내용이 표시될 때까지 ul이 늘어납니다. 그래서 속성 width:400px을 추가합니다.
제안 사항은 다음과 같습니다. width:400px; white-space:nowrap; Overflow:hidden;
위 내용은 기사 제목 목록의 줄 바꿈 문제를 해결하기 위해 공백을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!