기사 제목 목록의 줄 바꿈 문제를 해결하기 위해 공백을 사용하는 방법-HTML 튜토리얼-php.cn

기사 제목 목록의 줄 바꿈 문제를 해결하기 위해 공백을 사용하는 방법

巴扎黑

풀어 주다： 2017-04-05 16:43:45

원래의

2249명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!