كيف يمكنني الحد من الحد الأدنى والحد الأقصى لعنصر ما؟

Question

لديّ خط من النص الذي أريد رسم الحدود حوله. في الوقت الحالي ، يبدو العلامات هكذا:

<div id="titleBox"><span id="titleName" class="truncate">Really really long long long title name</span></div>

يبدو النمط مثل هذا:

    #titleBox{
    margin-top: 10px;

}

#titleName{
    margin: 5px;
    height: 1.6em;
    width: auto;
    max-width: 15.385em;    
    padding: 0.369em;
    margin: 0.369em;
    line-height: 1.7;
    color: rgba(0,0,0,0.4); 
    background-color: rgba(204,204,204,0.4); 
    border: 3px solid rgba(255,255,255,0.14);
    font-size: 153.9%;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;     
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;        
    -o-text-overflow: ellipsis;
    -moz-binding: url('../templates/ellipsis.xml#ellipsis');
}

التأثير الذي أحبه هو أنني أرغب في أن يكون المربع المصمم هو عرض النص ، ما لم يتجاوز العرض حد معين. ثم أريد أن يكون العرض محدودًا ثم يجب أن يبدأ الفصل المقطوع.

المشكلة في استخدام DIV فقط هي أن المربع لا يلف بعرض النص. يساعد استخدام فترة ولكن بعد ذلك لا يتم عرضها ككتلة. إن إجباره على عرض كتلة يعرض نفس المشكلة مثل لفها في Div عادي. لا يعمل استخدام مجموعة DIV/SPAN إما لأن الفترة تتجاهل حدود DIV إذا كان النص طويلًا جدًا.

هل هناك طريقة للحد من عرض النص ، مما يجبره على اقتطاع ولديك صندوق مصمم حول النص؟

Answer 1

حسب تعليقي ، display:inline-block يجب أن تعطي التأثير المطلوب. لن يعمل في