How to have a text stretch on to the width of div and stay in one line always, for email newsletter

StackOverflow https://stackoverflow.com/questions/23640199

  •  21-07-2023
  •  | 
  •  

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: enter image description here

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.

Was it helpful?

Solution

You can apply white-space to your #headerTop element:

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

Fiddle

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 &nbsp; and don't do it in CSS.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top