html - 如何在电子邮件 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;
}