मेरे पास यह एचटीएमएल है

<div class="link">
   <i class="icon" />
   <div class="text-wrapper">
       <span class="label">Some label which can span at most 2 lines</span>
       <span class="subtext">(optional)</span>
   </div>
</div>

दिखाने का एक तरीका है:

text on 2 separate lines

ध्यान दें कि लेबल दूसरी पंक्ति में कैसे लपेटता है जबकि सबटेक्स्ट इसके पीछे है।


प्रदर्शन का दूसरा तरीका है:

enter image description here

ध्यान दें कि कैसे यहां का लेबल लपेटने के लिए पर्याप्त लंबा नहीं है, लेकिन सबटेक्स्ट अभी भी दूसरी पंक्ति में है।

क्या कोई सुझाव दे सकता है कि मैं उपरोक्त को केवल HTML/CSS के साथ कैसे प्राप्त कर सकता हूं? समाधान में आइकन को अनदेखा करने के लिए स्वतंत्र महसूस करें। मेरे पास पहले से ही है। अग्रिम में धन्यवाद।

मेरे पास अब तक का कोड है ...

.link {
  position: relative;
  font-size: 0.875rem;
  padding-left: 26px;
  text-align: left;
  line-height: 1.25rem;
}
.icon {
  padding: 0;
  width: 18px;
  height: 18px;
  font-size: 18px;
  border-radius: 50%;
  transform: translateY(2px);
  position: absolute;
  top: 0;
  left: 0;
}

.label { 
  margin-right: 4px; 
  color: #007dbb; 
}
.subtext { color: #686868; }
7
John Fu 21 फरवरी 2020, 05:26
नमस्ते कृपया वह सीएसएस जोड़ें जिसका आप उपयोग करते हैं ताकि हम आपकी मदद कर सकें
 – 
Rkv88 - Kanyan
21 फरवरी 2020, 05:44

2 जवाब

पहले स्पैन को display: block; के रूप में सेट करें (label-element के लिए css देखें)। यह पहली अवधि को एक ब्लॉक तत्व के रूप में प्रदर्शित करेगा, दूसरी अवधि को एक नई लाइन पर शुरू करने के लिए मजबूर करेगा।

.link {
  position: relative;
  font-size: 0.875rem;
  padding-left: 26px;
  text-align: left;
  line-height: 1.25rem;
}
.icon {
  padding: 0;
  width: 18px;
  height: 18px;
  font-size: 18px;
  border-radius: 50%;
  transform: translateY(2px);
  position: absolute;
  top: 0;
  left: 0;
}

.label { 
  display: block;
  margin-right: 4px; 
  color: #007dbb; 
}
.subtext { color: #686868; }
<div class="link">
    <i class="icon">Icon</i>
    <div class="text-wrapper">
        <span class="label">Some label which can span at most 2 lines</span>
        <span class="subtext">(optional)</span>
   </div>
 </div>
1
SimonF 20 मार्च 2020, 14:26
हाय @SimonF, कोशिश करने के लिए धन्यवाद, लेकिन आपका समाधान आवश्यकताओं को पूरा नहीं करता है। मूल प्रश्न में पहला स्क्रीनशॉट देखें।
 – 
John Fu
1 अप्रैल 2020, 15:09
क्या आपका अपना कोड पहले परिदृश्य को पूरा नहीं करता है? यह भी स्पष्ट नहीं था कि आप 2 समस्याओं का समाधान चाहते थे न कि 1. कृपया अपने प्रश्न को स्पष्ट करें कि आप क्या चाहते हैं।
 – 
SimonF
1 अप्रैल 2020, 15:14

title और subtitle के लिए दो अलग span होने के बजाय। शीर्षक के लिए आपके पास एक अभिभावक हो सकता है और इसके अंदर subtitle अवधि जोड़ सकते हैं।

.link {
    display: flex;
    flex-direction: row;
}
.link i {
    margin-right: 10px;
}
.text-wrapper {
    display: flex;
    width: 175px;
}
.text-wrapper p {
    margin-top: 0;
}

.text-wrapper .subtitle {
    color: blue;
    font-style: italic;
}
<div class="link">
    <i class="icon">Icon</i>
    <div class="text-wrapper">
        <p class="title">Some label which can span at most 2 lines
          <span class="subtitle">(optional)</span>
        </p>
    </div>
 </div>
0
random 21 फरवरी 2020, 06:27
डाउनवोटिंग करते समय, कृपया कारण भी छोड़ दें। ताकि मुझे पता चले कि क्या गलत हुआ है।
 – 
random
21 फरवरी 2020, 06:35
इसका परीक्षण किया और यह काम नहीं करता है, इसे वास्तव में छोटा बनाने के लिए कुछ पाठ हटा दें और 'वैकल्पिक' शब्द एक नई पंक्ति में नहीं बनता है।
 – 
Gosi
21 फरवरी 2020, 06:35
- जरूरी नहीं कि ऑप्शनल हमेशा नई लाइन पर ही रहे। यदि पर्याप्त स्थान उपलब्ध है, तो यह शीर्षक पाठ के चारों ओर लपेट जाता है। मैं दोष नहीं दे रहा हूं, मैं उस व्यक्ति से पूछ रहा हूं जिसने डाउनवोट किया है।
 – 
random
21 फरवरी 2020, 06:38
यह उनकी आवश्यकता का हिस्सा है जो उन्होंने कहा है। "ध्यान दें कि कैसे यहां लेबल लपेटने के लिए पर्याप्त लंबा नहीं है, लेकिन सबटेक्स्ट अभी भी दूसरी पंक्ति में है।"
 – 
Gosi
21 फरवरी 2020, 06:39
यदि यह आवश्यकता है, तो मुझे लगता है कि सीएसएस के साथ प्रबंधन करना मुश्किल है, जबकि इसे जावास्क्रिप्ट के साथ प्रबंधित किया जा सकता है।
 – 
random
21 फरवरी 2020, 06:40