1. 홈
  2. 질의 응답
  3. 텍스트 오버 플로우가 작동하지 않습니다. 첨부 된 간단한 HTML

텍스트 오버 플로우가 작동하지 않습니다. 첨부 된 간단한 HTML

2011-10-13 3 views
1

첨부 된 HTML은 야후 뉴스 스타일 패널을위한 것입니다. 오버플로 될 때 아래쪽의 내용에 "줄임표"가 표시되기를 원합니다.텍스트 오버 플로우가 작동하지 않습니다. 첨부 된 간단한 HTML

현재 브라우저는 오버플로 : 숨겨진 세트가 있기 때문에 오버플로를 감지하고자를 수 있지만 끝 부분에 줄임표가 추가되지는 않습니다.

아이디어가 있으십니까? HTML을 체크 아웃하기 위해 HTML 파일에 저장하면됩니다. 덕분에 많은

<style type="text/css"> 

.slider-nav 
{ 
    position:absolute; 
    height:40px; 
    width:40px; 
    top:40%; 
}  

.slider-nav-left 
{ 
    background-position: 0px -797px; 
    right:2%; 

} 

.slider-nav-right 
{ 
    background-position:0px -858px; 
    left:2%; 
} 


.slider-main 
{ 
    margin:0% 80px; 
    position:relative; 
    height:80%; 
    border-left:1px dotted #9f9e9e; 
    border-right:1px dotted #9f9e9e; 
    top:10%; 
} 

ol 
{ 
    width:100%; 
    height:100%; 
    position:relative; 
    margin:0; 
    padding:0; 
} 

li 
{ 
    width: 100%; 
    height:100%; 
    position:relative; 
    display:inline; 
    float:left; 
} 

a 
{ 
    width:25%; 
    height:100%; 
    position:relative; 
    display: inline; 
    float:left; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

.slider-title 
{ 
    height:55px; 
    margin:0px 5px; 
    display:block; 
    font-size: 12px; 
    font: verdana; 
} 

.slider-content 
{ 
    font: verdana; 
    margin:0px 5px; 
    display:block; 
    font-size: 16px; 
    text-overflow: ellipsis; 
} 

</style> 

<body> 
<div style = "width:800px; position:relative; height:210px; border: 1px solid black"> 
    <img class = "slider-nav slider-nav-left" /> 
    <div class = "slider-main"> 
     <ol> 
      <li> 
       <a> 
        <span class = "slider-title"> 
         Oil plunges below $84 in Asia after S&P lowers Us Debt Ratins 
        </span> 

        <span class = "slider-content"> 
         <p>Reuters</p> 
         Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 

        </span> 

       </a> 
       <a> 
        <span class = "slider-title"> 
         Stable Prospects for Oil and Gas Companies Reflect the Economy and High Oil Prices 
        </span> 

        <span class = "slider-content"> 
         <p>RIT New</p> 
         Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
        </span> 
       </a> 
       <a> 
        <span class = "slider-title"> 
         Stable Prospects for Oil and Gas Companies Reflect the Economy and High Oil Prices 
        </span> 

        <span class = "slider-content"> 
         <p>RIT New</p> 
         Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
        </span> 
       </a> 
       <a> 
        <span class = "slider-title"> 
         Stable Prospects for Oil and Gas Companies Reflect the Economy and High Oil Prices 
        </span> 

        <span class = "slider-content"> 
         <p>RIT New</p> 
         Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
        </span> 
       </a> 
      </li> 
     </ol> 
    </div> 
    <img class = "slider-nav slider-nav-right" /> 
</div> 
</body> 


Thanks

출처

2011-10-13 user715489

답변

2

text-overflow은 발효.

는

http://www.quirksmode.org/css/textoverflow.html 그래서 당신의 CSS는 것 참조 : nowrap는 소스 코드에서와 같이 텍스트가 배치하게

.slider-content 
{ 
    font: verdana; 
    margin:0px 5px; 
    display:block; 
    font-size: 16px; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
}

하는 것으로 - 즉, 아니 행 즉시. 소스 코드에서 텍스트를 줄 바꿈해야합니다.

출처

2012-03-22 14:07:21

관련 문제

 관련 문제