गुण column-width

गुण column-width मल्टी-कॉलम टेक्स्ट में कॉलम की चौड़ाई निर्धारित करता है। गुण का मान प्रतिशत को छोड़कर आकारों की कोई भी इकाई हो सकता है, या फिर कीवर्ड auto (डिफ़ॉल्ट रूप से)। जब मान auto होता है, तो ब्राउज़र column-count और column-gap के आधार पर स्वयं कॉलम की इष्टतम चौड़ाई तय करता है।

सिंटैक्स

cssसिलेक्टर {
  column-width: मान;
}

उदाहरण . निर्दिष्ट चौड़ाई

इस उदाहरण में, कॉलम की चौड़ाई column-width 150px निर्दिष्ट की गई है, और उनकी संख्या column-count auto पर सेट है। परिणामस्वरूप, कॉलम की चौड़ाई 150px होगी, उनकी संख्या और उनके बीच का अंतर ब्राउज़र स्वयं तय करेगा:

html<div id="elem">
  some long text
</div>

css#elem {
  column-count: auto;
  column-width: 150px;
  text-align: justify;
}

Результат:

उदाहरण . मान auto

इस उदाहरण में, टेक्स्ट 3 कॉलम में विभाजित हो जाएगा (क्योंकि column-count का मान 3 पर सेट है), लेकिन उनकी चौड़ाई स्वचालित रूप से गणना की जाएगी:

html<div id="elem">
  some long text
</div>

css#elem {
  column-width: auto;
  column-count: 3;
  text-align: justify;
}

Результат:

यह भी देखें