मेरे पास <div> तत्वों का एक सेट है जिसके लिए अंत में टाइमस्टैम्प की आवश्यकता है।

<dl class="container">
   <dd time="5:30 PM">some text</dd>
   <dd time="5:35 PM">possibly very long text that takes up more than one line, long long long long long long long long long long long long long long long long</dd>
   <dd time="5:44 PM">or short</dd>
</dl>

टाइमस्टैम्प ::after छद्म के साथ बनाए जा रहे हैं। मैं चाहता हूं कि वे बॉक्स के भीतर जगह लें, इसलिए वे absolute नहीं हो सकते, लेकिन उन्हें निचले बाएं कोने से चिपके रहने की जरूरत है।

  • फ्लोट मुझे नीचे की ओर संरेखित नहीं होने देता।
  • क्योंकि यह एक छद्म है, मैं इसे डबल-रैप नहीं कर सकता, और इसके अलावा, यदि संभव हो तो मैं वास्तव में इससे बचना पसंद करूंगा।
  • अगर मैं अंतिम पंक्ति में शेष चौड़ाई लेने के लिए ::after प्राप्त कर सकता हूं, तो मैं टेक्स्ट को सही-संरेखित कर सकता हूं और यह ठीक होगा, लेकिन मुझे बनाने का कोई तरीका नहीं मिला है एक तत्व पाठ के अनुच्छेद की अंतिम पंक्ति में शेष स्थान लेता है।
  • block, table-footer-group और table-caption एक नई लाइन बनाते हैं, और मैं चाहता हूं कि टाइमस्टैम्प उसी लाइन पर हो, अगर वहां इसके लिए जगह हो।
  • हो सकता है कि एक फ्लेक्स-बॉक्स समाधान हो, लेकिन मैंने अब तक जो कोशिश की है वह हमेशा उपरोक्त पाठ के अनुच्छेद को गड़बड़ कर देती है
css
2
Aza Azdaema 22 फरवरी 2020, 05:49

2 जवाब

समाधान एक:

display:block को dd::after एलीमेंट पर लागू करें:

dd{
  border:1px solid black;
  width:200px;
  background-color:lightgreen;
}

dd::after {
  content: attr(time);
  display: block;
  margin-top:0.5em;
}
<dl class="container">
   <dd time="5:30 PM">some text</dd>
   <dd time="5:35 PM">possibly very long text that takes up more than one line, long long long long long long long long long long long long long long long long</dd>
   <dd time="5:44 PM">or short</dd>
</dl>

आप सामग्री में विशेष वर्ण "\A" को शामिल करके भी ऐसा कर सकते हैं, और white-space: pre-wrap सेट कर सकते हैं, लेकिन यदि आप मार्जिन या पैडिंग का उपयोग करना चाहते हैं, तो आपको डिस्प्ले को ब्लॉक करने के लिए सेट करना होगा:

dd{
  border:1px solid black;
  width:200px;
  background-color:lightblue;
}
dd::after {
  content:"\A " attr(time);
  white-space: pre-wrap;
}
<dl class="container">
   <dd time="5:30 PM">some text</dd>
   <dd time="5:35 PM">possibly very long text that takes up more than one line, long long long long long long long long long long long long long long long long</dd>
   <dd time="5:44 PM">or short</dd>
</dl>
0
Community 20 जून 2020, 12:12

आपने संकेत दिया कि फ्लेक्सबॉक्स एक समस्या थी।

ऐसा लगता है कि यह इसे हल कर रहा है लेकिन यह छद्म तत्व को display:block पर सेट करने जैसा ही है जैसा कि दूसरे उत्तर में बताया गया है।

dd {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin: 1em;
  border: 1px solid grey;
}

dd:after {
  content: attr(time);
  flex: 1 0 100%;
  background: lightblue;
}
<dl class="container">
  <dd time="5:30 PM">some text</dd>
  <dd time="5:35 PM">possibly very long text that takes up more than one line, long long long long long long long long long long long long long long long long</dd>
  <dd time="5:44 PM">or short</dd>
</dl>
0
Paulie_D 22 फरवरी 2020, 16:57
जैसा मैंने कहा, मैं नहीं चाहता कि यह पूरी लाइन ले। मैं केवल इतना चाहता हूं कि यह उतनी ही चौड़ाई ले, जितनी इसकी जरूरत है।
 – 
Aza Azdaema
22 फरवरी 2020, 21:00