You can apply white-space
to your #headerTop
element:
#headerTop {
white-space: nowrap;
overflow: hidden;
width: 100%;
text-overflow: ellipsis;
}
Question
I am creating an email newsletter, for which I need to have a text (moto of company) to stay in one line only.
this is the code I wrote for it
<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>
Basically is should look like:
My css code looks like:
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;
}
Please let me know the best way to create this.
Thanks in advance.
Solution
You can apply white-space
to your #headerTop
element:
#headerTop {
white-space: nowrap;
overflow: hidden;
width: 100%;
text-overflow: ellipsis;
}
OTHER TIPS
E-mail newsletters are very fickle things. Although I would never recommend this way for a web site, I would say that the safest option for an email newsletter is to change all the spaces to
and don't do it in CSS.