मेरे पास यह टेक्स्ट है जिसे मैं टूलटिप के रूप में प्रदर्शित करना चाहता हूं। स्टाइल के बिना (केवल 16px के रूप में परिभाषित फ़ॉन्ट-आकार) ऐसा दिखता है:

enter image description here

मैं वास्तव में जो चाहता हूं वह पाठ को एक पंक्ति में प्रदर्शित करना है - इसलिए मैंने सफेद-स्थान को सीएसएस में पूर्व में सेट किया है:

::ng-deep .mat-tooltip {
  font-size: 16px;
  white-space: pre;
}

लेकिन अब टेक्स्ट टूलटिप के बॉक्स के बाहर चला जाता है:

enter image description here

मैंने चौड़ाई को उच्च px मान पर सेट करने का प्रयास किया लेकिन उसने कुछ नहीं किया।

क्या बॉक्स को टेक्स्ट में फिट करने का कोई तरीका है?

[संपादित करें - अनुपलब्ध उदाहरण जोड़ा गया जैसा कि टिप्पणियों में बताया गया था]: स्टैकब्लिट्ज लिंक
उदाहरण में टेक्स्ट बॉक्स को नहीं छोड़ता है, लेकिन पूरे टेक्स्ट के चारों ओर फिट होने वाले बॉक्स के बजाय संक्षिप्त है, मैंने चौड़ाई को 400px पर सेट किया है।

2
coconut 3 मई 2019, 18:59

1 उत्तर

सबसे बढ़िया उत्तर

बस अधिकतम-चौड़ाई को unset पर सेट करें। ऐसा करने के लिए, एक वैश्विक सीएसएस वर्ग को निम्नानुसार परिभाषित करें:

.my-custom-tooltip {
  max-width: unset !important;
}

फिर क्लास का नाम टूलटिप पर पास करें:

<button mat-raised-button
        matTooltip="This Infotext is displayed one line if possible. Just a little more text for demo!"
        matTooltipClass="my-custom-tooltip">
  Action
</button>

जैसा कि @rinktacular उल्लेख किया गया है, ng::deep का उपयोग न करने का प्रयास करें।

वर्किंग स्टैकब्लिट्ज उदाहरण: https://stackblitz.com/edit/angular-qkh4cl

13
Eiman 3 मई 2019, 22:26