如何在电子邮件 html 中制作可调节的分隔线并在其旁边添加文字？

Question

我需要在旁边做一个调整行，而如果单词太长，我的代码会让单词跳到两行。我想要的只是保持一行，左边的行变窄，我需要文本区域灵活，这样我就可以输入更小的单词或句子。

我的结果normal one , longer text

下面的代码

css

.label-border-gray { border-top: 1px solid #333333; }
.label p { 
    font-size: 20px;
    color: #222222;
}
.height10 { height: 10px; font-size: 10px; line-height: 10px; }
img {
    display: block;
    border: 0;
    line-height: 100%;
    outline: none;
    text-decoration: none;
    -ms-interpolation-mode: bicubic;
}
.block .img p {
    margin: 0 !important;
}
.flat {
    line-height: 0px;
    font-size: 0px;
}

.flat img {
    line-height: 16px;
    font-size: 12px;
}
.flat p {
    margin: 0px;
    padding: 0px;
}

html

<table style="width:800px;" border="0" cellpadding="0" cellspacing="0" class="block on600-widthfull" align="center">
<tr><th class="height30" colspan="3">&nbsp;</th></tr>
    <tr>
        <th style="width:35px;" class="on600-hide">&nbsp;</th>
        <th class="on600-width80percent on420-hide img flat margin-0" align="left" valign="middle">
            <table width="" border="0" cellpadding="0" cellspacing="0" class="on600-widthfull bg" align="center">
            <tr><th style="width:500px;" class="height10">&nbsp;</th></tr>
            <tr><th style="width:500px;" class="label-border-gray height10">&nbsp;</th></tr>
            </table>
        </th>
        <th class="on600-width50percent on420-widthfull" align="left" valign="middle">
            <table border="0" cellpadding="0" cellspacing="0" align="right">
                <tr>
                    <th style="width: 23px;" align="right" class="img flat">
                        <p><img src="template/icon.png" style="width:20px;"></p>
                    </th>
                    <th style="width: 10px;">&nbsp;</th>
                    <th align="left" class="margin-0 label" valign="middle">
                        <p>Some text here</p>
                    </th>
                </tr>
            </table>
        </th>
        <th style="width:35px;" class="on600-hide">&nbsp;</th>
    </tr>
    <tr><th class="height20" colspan="4">&nbsp;</th></tr>
</table>

Answer 1

您可以使用 white-space: nowrap 作为包含文本的标签

.label p {
    font-size: 20px;
    color: #222222;
    white-space: nowrap;
}

Answer 2

这将使所有内容都在一行中：

<span style="white-space: nowrap; word-break: keep-all !important; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens: none !important;">Lets stick together</span>

这对您的需求来说可能有些过分了。添加这两个，你应该没问题：

white-space: nowrap; word-break: keep-all !important;

祝你好运。

如何在电子邮件 html 中制作可调节的分隔线并在其旁边添加文字？

How to make adjustable divider lines with word beside it in email html?

html

css

email

newsletter