html - 's that don' t 溢出的文本溢出和动态宽度

Question

我正在尝试使用一种会增加边框直到达到 300px 的样式，然后在达到最大值时使用 text-overflow: ellipses。 Click Here 转到包含我正在处理的内容的 JSFIDDLE。

我希望最长的消息文本在 300 像素处停止，然后显示一个省略号。较短的文本应该使边框缩小到文本的大小。非常感谢任何帮助。

.border{ 
    background-color: #ffffff; 
    border: 3px solid #ffffff; 
    border-radius: 5px; 
    box-shadow: 0px 0px 10px #999999; 
    margin-left: 20px; 
    margin-top: 5px; 
    padding: 2px; 
    position: relative; 
    z-index: 4;
}

.border.small { 
    /* background-image: url('%Image(G3VISIF_EXP_BKGRD_SM)'); */
    box-shadow: 1px 1px 10px #999999; 
    background-size: 100% 100%; 
    height: 22px;
    width: auto;
}


.message { 
    color: #5c5d60; 
    font-family: Arial; 
    font-size: 17px;
    font-weight: bold;
    padding-left: 5px; 
    padding-top: 2px;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 300px;
    display: block;
    overflow: hidden;
}

<div class="border small">
    <div class="message">
        Is [GRIDREC:EMPLID] Equals 123456789012345678901234567890
    </div>
</div>

<div class="border small">
    <div class="message">
        Is Part Time
    </div>
</div>

<div class="border small">
    <div class="message">
        Recieves Full Benefits
    </div>
</div>

Answer 1

非常简单。

这里有两种方式(不改变你当前的html结构):

1- 如果您希望消息换行，保持当前结构:

.expression {
    /* rest of styles */
    float: left;
    clear: left;
}

演示 http://jsfiddle.net/L66fs1y5/2/

2- 如果可以将消息放在同一行，请保持当前结构:

.expression {
    /* rest of styles */
    display: inline-block;
}

演示 http://jsfiddle.net/L66fs1y5/3/