मेरे पास बहुत सीमित स्थान है जहां मैं टेक्स्ट प्रदर्शित कर सकता हूं, और मैं लाइन ब्रेक, स्क्रॉलिंग या पैरेंट डिव को ओवरफ्लो करने के बजाय कुछ भी अतिरिक्त छिपाना चाहता हूं।

इस मामले में मेरा टेक्स्ट एंकर टैग के अंदर है, इसलिए मैंने उदाहरण के लिए एक छोटा घटक बनाया है कि मैं यहां क्या करना चाहता हूं:

function App () {
  return (
    <div style={{ width: 100, border: 'solid 1px black'}}>
      <a style={{ overflow: 'hidden'}} href='#'>Please hide any text that would cross the parent divs border instead of line breaking to make it longer.</a>
    </div>
  )
}

ReactDOM.render(
  <App/>,
  mountNode
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container" style="padding: 24px"></div>
<script>
  var mountNode = document.getElementById('container');
</script>

वैसे भी, एंकर टैग की टेक्स्ट सामग्री को केवल एक पंक्ति रखने के लिए मैं उस अतिरिक्त टेक्स्ट को कैसे छुपा सकता हूं?

0
theJuls 25 अक्टूबर 2019, 21:47

3 जवाब

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

आप white-space: nowrap और display: block खो रहे हैं।

1) white-space: nowrap लाइन रैपिंग को रोकता है।

2) display: block सुनिश्चित करता है कि एंकर को उसके टेक्स्ट की चौड़ाई के विपरीत, उसके पैरेंट की चौड़ाई विरासत में मिले।

div {
  width: 100px;
  border: 1px solid black;
}

a {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* optional */
  display: block;
}
<div>
  <a>Please hide any text that would cross the parent divs border instead of line breaking to make it longer.</a>
</div>
2
junvar 25 अक्टूबर 2019, 18:53

आप सीएसएस अतिप्रवाह संपत्ति "छुपा" का उपयोग कर सकते हैं।

<div style="overflow:hidden; width:100px; height: 100px; border: 1px solid black">hide any text that would cross the parent divs border instead of line breaking to make it longer</div>
1
JoshuaD 25 अक्टूबर 2019, 18:51

Div में छिपे हुए अतिप्रवाह को स्थानांतरित करें और लिंक में व्हाइटस्पेस नो रैप जोड़ें

function App () {
  return (
    <div style={{overflow: 'hidden', width: 100, border: 'solid 1px black'}}>
      <a style={{ whiteSpace:'nowrap'}} href='#'>Please hide any text that would cross the parent divs border instead of line breaking to make it longer.</a>
    </div>
  )
}

ReactDOM.render(
  <App/>,
  mountNode
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container" style="padding: 24px"></div>
<script>
  var mountNode = document.getElementById('container');
</script>
3
Willman.Codes 25 अक्टूबर 2019, 18:51