Question

我正在创建一个电子邮件简报，我需要有一个文本（公司的moto）才能保持一行。

这是我为它写的代码

<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>

基本上应该是这样的： enter image description here

我的css代码如下：

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;
        }

请让我知道创建此内容的最佳方式。

提前致谢。

Answer 1

您可以将white-space应用于#headerTop元素：

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

Fiddle

Answer 2

电子邮件通讯是非常易变的事情。虽然我绝不会推荐这种方式用于网站，但我会说电子邮件简报最安全的选择是将所有空格更改为 而不要在CSS中进行。

如何将文本延伸到div的宽度并始终保持一行，用于电子邮件新闻稿

2 个答案: