2014-05-13 4 views
0

나는 한 줄로 머무를 텍스트 (회사의 모토)가 있어야하는 이메일 뉴스 레터를 만들고 있습니다. 만.div의 너비에 텍스트를 늘리고 한 줄에 항상 머물게하는 방법, 이메일 뉴스 레터

이 내가

<body> 
    <div id="main"> 
     <div id="headerTop"> 
      <img src="img/logo.png" alt="Company logo"/> 
      <span style="padding-left:15px;"> An initiative to help make the web perceivable operable understandable and robust in other words Accessible.</span> 
     </div> 

을 위해 쓴 코드는 기본적으로 같아야입니다 :

body{ 
      margin: 0 auto; 
      width: 100%px; 
      background:#484A64; 
      font-family: "Arial, Helvetica, sans-serif"; 
     } 
     #main{ 
      background:#484A64; 
      width: 860px; 
      height: auto; 
      text-align:left; 
      color:white; 
      margin: 0 auto; 
      padding-top:10px; 
     } 
     #headerTop{ 
      font-size: 0.8em; 
      font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
      border-bottom:1px dotted white; 
      padding-bottom:10px; 
      width:100%; 
      height:31px; 
      text-align:left; 
     } 

나를 가장 잘 알고 주시기 바랍니다 : enter image description here

내 CSS 코드는 같다 이것을 만드는 방법.

미리 감사드립니다.

+0

게재 위치를 매우 중요하게 생각하면 항상 이미지로 변환하는 것이 가장 안전합니다. 그렇게하면 너비를 100 %로 설정하면 이미지 크기가 줄어들 때 텍스트 크기가 조정됩니다. – John

답변

1

당신은 당신의 #headerTop 요소에 white-space을 적용 할 수

#headerTop { 
    white-space: nowrap; 
    overflow: hidden; 
    width: 100%; 
    text-overflow: ellipsis; 
} 

Fiddle

0

전자 메일 뉴스 레터는 매우 변덕스러운 것들입니다. 웹 사이트에서이 방법을 권장하지는 않겠지 만 전자 메일 뉴스 레터의 가장 안전한 옵션은 모든 공백을 &nbsp;으로 변경하고 CSS에서하지 않는 것입니다.