मैं तत्व से पहले या उसके बाद लाइन ब्रेक से कैसे बचूं?

Question

मेरे पास एक परिभाषा सूची है। मेरा <dt> और <dd> सीएसएस में display: inline-block; के रूप में सेट हैं। और मैं <dd> तत्व से पहले और <dt> तत्व के बाद लाइन ब्रेक से बचना चाहता हूं। मैं यह कैसे कर सकता हूं?

term1:

मेरी सूची term3 के बाद एक लाइन ब्रेक के साथ इस तरह दिखता है, def1; टर्म 2: डीफ़ 2; टर्म 3:
def3; TERM2; def1:

term1:

मैं इसे (लाइन ब्रेक term3 से पहले दिखाई देनी चाहिए इस तरह दिखना चाहता हूँ def2;
term3: def3;

Answer 1

एक ही रास्ता मैं ऐसा करने के बारे में सोच सकता हूं कि प्रत्येक तत्व के लिए चौड़ाई निर्धारित करें ताकि प्रत्येक पंक्ति पर एक अनुमानित ब्रेक पॉइंट हो।

Answer 2

सिंगल कॉलम (मान्य HTML):

<style type="text/css"> 
    dt, dd { display: inline-block; float: left; } 
    dt { clear: left; } 
</style> 

<dl> 
    <dt>term1</dt><dd>def1</dd> 
    <dt>term2</dt><dd>def2</dd> 
    <dt>term3</dt><dd>def3</dd> 
</dl> 

नो-लपेटें <span> (अमान्य एचटीएमएल):

<style type="text/css"> 
    dt, dd { display: inline-block; } 
    span { white-space: nowrap; } 
</style> 

<dl> 
    <span><dt>term1</dt><dd>def1</dd></span> 
    <span><dt>term2</dt><dd>def2</dd></span> 
    <span><dt>term3</dt><dd>def3</dd></span> 
</dl> 

Answer 3

मेरे लिए यह सिर्फ एक साथ एक ही लाइन पर dt और dd को निर्दिष्ट inline प्रदर्शन शैली के साथ, इस तरह से काम किया:

<style type="text/css"> 
    dt, dd { display: inline; } 
</style> 

<dl> 
    <dt>term1</dt><dd>def1</dd> 
    <dt>term2</dt><dd>def2</dd> 
    <dt>term3</dt><dd>def3</dd> 
</dl> 

जो मैंने पहले किया था:

<style type="text/css"> 
    dt, dd { display: inline; } 
</style> 

<dl> 
    <dt>term1 
    <dd>def1 
    <dt>term2 
    <dd>def2 
    <dt>term3 
    <dd>def3 
</dl> 

ठीक काम करने के लिए जब गतिशील ब्राउज़र विंडो का आकार लगता है - मैं देख रहा हूँ कभी नहीं यह केवल dd और dt के बीच dt और dd के बीच टूट गया।