Как сделать регулируемые разделительные линии со словом рядом с ним в электронной почте HTML?

Question

Мне нужно настроить строку со словом рядом, в то время как мой код заставляет слова переходить в две строки, если слова слишком длинные. Я хочу просто держать в одной строке, а левая строка сузиться, и мне нужно, чтобы текстовая область была гибкой, чтобы можно было вводить меньшее слово или предложение.

мой результат нормальный , более длинный текст

код ниже

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

Это будет держать все в одной строке:

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

Удачи.

Answer 2

Вы можете использовать пробел: nowrap для тега, содержащего текст

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