기사 제목 목록의 줄 바꿈 문제를 해결하기 위해 공백을 사용하는 방법
- 巴扎黑원래의
- 2017-04-05 16:43:452228검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.