2005년 05월 24일
[CSS] 출력 내용 한 줄에 보이고 나머지 잘라버리기
현석님의 블로그에서 Recent Entries 등을 소스와 화면출력을 비교해 보면 내용이 긴 줄인데 뒷부분이 잘린 것을 볼 수 있다.
어떻게 해야 하지? 궁금해서 소스를 봤다..
대충 다음과 같다.
<html>
<head>
<style type="text/css">
<!--
#sidebar {
font-size: 90%;
width: 130px;
}
#sidebar ul {
margin: 4px 0 20px 0;
padding-left: 10px;
list-style: none;
}
#sidebar li {
width: 100%;
white-space: nowrap;
overflow: hidden;
margin: 0;
}
-->
</style>
<title>css test</title>
</head>
<body>
<div id="sidebar">
<ul>
<li>아주 긴글을 써 보려고 합니다.어떻게 될까요?</li>
<li>오.. 뒷 부분은 삭제된 상태로 보이는군요.. 괜찮습니다!</li>
<li>이거 참 괜찮군요!!</li>
<li>아무래도 white-space: nowrwap;과 overflow: hidden; 때문인거 같습니다.</li>
<li>사실 저는 CSS를 잘 모르니 믿지 마세요~</li>
<li>from Kwon~</li>
</ul>
</div>
</body>
</html>
저걸 브라우저에서 보면 지정된 폭 이상으로 넘어가는 텍스트는 짤려서 아예 보이지 않는다.
그리고 FireFox든 IE든 동일하게 작동한다.
대충 이해 된거 같다.. ^^; 암튼.. 게시판 같은 거 짤 때 편해졌다~~ 아싸~~
언능, 표준 HTML이랑 CSS도 익혀야 쓰는데, 요즘 일이 많아서 게다가 대부분의 일이 웹이랑은 무관해서 언제나 본격적으로 공부하게 될른지...
어떻게 해야 하지? 궁금해서 소스를 봤다..
대충 다음과 같다.
<html>
<head>
<style type="text/css">
<!--
#sidebar {
font-size: 90%;
width: 130px;
}
#sidebar ul {
margin: 4px 0 20px 0;
padding-left: 10px;
list-style: none;
}
#sidebar li {
width: 100%;
white-space: nowrap;
overflow: hidden;
margin: 0;
}
-->
</style>
<title>css test</title>
</head>
<body>
<div id="sidebar">
<ul>
<li>아주 긴글을 써 보려고 합니다.어떻게 될까요?</li>
<li>오.. 뒷 부분은 삭제된 상태로 보이는군요.. 괜찮습니다!</li>
<li>이거 참 괜찮군요!!</li>
<li>아무래도 white-space: nowrwap;과 overflow: hidden; 때문인거 같습니다.</li>
<li>사실 저는 CSS를 잘 모르니 믿지 마세요~</li>
<li>from Kwon~</li>
</ul>
</div>
</body>
</html>
저걸 브라우저에서 보면 지정된 폭 이상으로 넘어가는 텍스트는 짤려서 아예 보이지 않는다.
그리고 FireFox든 IE든 동일하게 작동한다.
대충 이해 된거 같다.. ^^; 암튼.. 게시판 같은 거 짤 때 편해졌다~~ 아싸~~
언능, 표준 HTML이랑 CSS도 익혀야 쓰는데, 요즘 일이 많아서 게다가 대부분의 일이 웹이랑은 무관해서 언제나 본격적으로 공부하게 될른지...
# by | 2005/05/24 02:23 | 프로그래밍 | 트랙백 | 덧글(0)
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]