Question

我尝试使用会增长边框的样式，直到达到300px然后将使用文本溢出：当达到最大值时使用省略号。 Click Here转到包含我正在处理的内容的JSFIDDLE。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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/

文本溢出和<div>的动态宽度不会溢出</div>

1 个答案: