html - 如何将文本拉伸(stretch)到 div 的宽度并始终保持在一行中,用于电子邮件通讯

标签 html css newsletter

我正在创建一份电子邮件时事通讯,为此我需要一个文本(公司的 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;
        }

请告诉我创建它的最佳方法。

提前致谢。

最佳答案

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

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

Fiddle

关于html - 如何将文本拉伸(stretch)到 div 的宽度并始终保持在一行中,用于电子邮件通讯,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23640199/

相关文章:

html - 如何为下拉选择选项添加渐变背景?

css - 可扩展的div

email - 在没有网站的情况下使用 Google Analytics 对时事通讯进行点击跟踪

html - 无法悬停在 img 元素上,当 img 悬停时无法旋转元素

html - 兼容IE6/IE7的菜单列表

html - CSS 位置 :fixed header

html - 如何构建 html 时事通讯响应 block 顺序

html - 如何将 Font Awesome 图标添加到输入字段?

html - 显示 :block + overflow:auto, 它们是如何工作的

html - 需要 NewsLetter 可接受的 html 元素和属性的规则列表