मैं सीएसएस के साथ पाठ को कैसे बदल सकता हूं?

Question

मैं इस तरह से एक विधि का उपयोग करके सीएसएस के साथ पाठ को कैसे बदल सकता हूं:

.pvw-title img[src*="IKON.img"] { visibility:hidden; }

इसके बजाय ( img[src*="IKON.img"] ), मुझे कुछ ऐसा उपयोग करने की आवश्यकता है जो पाठ की जगह ले सके।

मुझे [ ]इसे काम करने के लिए उपयोग करना होगा।

<div class="pvw-title">Facts</div>

मुझे " तथ्य " को बदलने की आवश्यकता है ।

Comments

ईमानदार होना इसके लिए जावास्क्रिप्ट का उपयोग करना सबसे अच्छा हो सकता है।

— सर

जावास्क्रिप्ट का उपयोग करने के लिए DOM लोड करने की आवश्यकता होती है, इसलिए FOUC है। मैं यह करना चाहता हूं कि HTML सर्वर-साइड जेनरेट किए बिना FOUC से बचने के लिए क्वेरी स्ट्रिंग से निकाले गए कंटेंट से टेक्स्ट को रिप्लेस किया जाए (जिससे HTML को आक्रामक तरीके से कैश किया जा सके और CDN से परोसा जा सके)।

— नीमच

सवाल यह है कि इसे सीएसएस के साथ कैसे किया जाए। मैं कर रहा हूँ एक सीएमएस का उपयोग कर कि केवल मुझे सीएसएस, है यही वजह है कि मैं पर पहुंचे बदलने की अनुमति देता इस पेज जबकि उत्तर के लिए googling, और न किसी अन्य के साथ। इसलिए हम उस प्रश्न का उत्तर देते हैं जो पूछने के बजाय पूछा गया था कि प्रश्नकर्ता की स्थिति अलग क्यों नहीं है।

— felwithe

Answer 1

या हो सकता है कि आप <span>इस प्रकार से 'तथ्य' को लपेट सकें :

<div class="pvw-title"><span>Facts</span></div>

फिर उपयोग करें:

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}

Comments

अच्छा है, लेकिन यह सिर्फ सीएसएस के बजाय HTML में बदलाव है।

— मिकमेकाना 15

कभी-कभी इसका एकमात्र विकल्प

— locrizak

स्पैन {प्रदर्शन: कोई नहीं; } छद्म तत्व को भी छिपाना चाहिए। आपको दृश्यता का उपयोग करना चाहिए: इसके बजाय छिपा हुआ

— xryl669

कुछ भी डिस्प्ले मत करो; और दृश्यता: छिपी हुई; दोनों छद्म तत्व को छिपाते हैं

— फेसुंडो कैमेडियर

@ मैथ्यू अवधि को छिपा रहा है, लेकिन छद्म तत्व को div में जोड़ रहा है, इसलिए छद्म तत्व को छिपाया नहीं जाना चाहिए (या तो दृश्यता या प्रदर्शन संपत्ति का उपयोग करके)

— Dewtea

Answer 2

अनिवार्य : यह एक हैक है: CSS ऐसा करने के लिए सही जगह नहीं है, लेकिन कुछ स्थितियों में - जैसे, आपके पास iframe में एक थर्ड पार्टी लाइब्रेरी है जिसे केवल CSS द्वारा कस्टमाइज़ किया जा सकता है - इस तरह का हैक एकमात्र विकल्प है ।

आप पाठ को सीएसएस के माध्यम से बदल सकते हैं। आइए CSS का उपयोग करते हुए 'अलविदा' कहने वाले लाल बटन के साथ हरे रंग के बटन को 'हैलो' से बदलें ।

इससे पहले:

उपरांत:

लाइव डेमो के लिए http://jsfiddle.net/ZBj2m/274/ देखें :

यहाँ हमारे हरे बटन:

<button>Hello</button>

button {
  background-color: green;
  color: black;
  padding: 5px;
}

अब मूल तत्व को छिपाते हैं, लेकिन बाद में एक और ब्लॉक तत्व जोड़ते हैं:

button {
  visibility: hidden;
}
button:after {
  content:'goodbye'; 
  visibility: visible;
  display: block;
  position: absolute;
  background-color: red;
  padding: 5px;
  top: 2px;
}

ध्यान दें:

• हमें स्पष्ट रूप से इसे ब्लॉक तत्व के रूप में चिह्नित करना होगा, 'बाद' तत्व डिफ़ॉल्ट रूप से इनलाइन हैं
• हमें छद्म तत्व की स्थिति को समायोजित करके मूल तत्व के लिए क्षतिपूर्ति करने की आवश्यकता है।
• हमें मूल तत्व को छिपाना चाहिए और छद्म तत्व का उपयोग करना चाहिए visibility। display: noneमूल तत्व पर ध्यान दें काम नहीं करता है।

Comments

यह 10 में काम नहीं करता है, किसी भी विचार यह करने के लिए कैसे संशोधित करने के लिए?

— सोलमहेड 3

display: none;काम नहीं करता है क्योंकि ::afterवास्तव में इसका मतलब है "इस तत्व के अंदर, लेकिन अंत में", मामले में किसी को भी उत्सुक था।

— Ry-

दुर्भाग्य से, "संशोधित" बटन अब बटन की तरह काम नहीं करता है। यह एक अच्छा उदाहरण है, बस यह कि यह एक बटन पर लागू नहीं होता है।

— xryl669

कुछ भी डिस्प्ले मत करो; और दृश्यता: छिपी हुई; दोनों छद्म तत्व को छिपाते हैं

— फेसुंडो कैमेडियर

कैसे आता है जब मैं ऐसा करता हूं तो यह तत्व को बदल देता है लेकिन टेक्स्ट सभी कैप है और इसे लोअरकेस में नहीं बदला जा सकता है?

— जपजी रजनीश

Answer 3

यदि आप छद्म तत्वों का उपयोग करने के इच्छुक हैं और उन्हें सामग्री डालने दें, तो आप निम्न कार्य कर सकते हैं। यह मूल तत्व का ज्ञान ग्रहण नहीं करता है और इसके लिए अतिरिक्त मार्कअप की आवश्यकता नहीं होती है।

.element {
  text-indent: -9999px;
  line-height: 0; /* Collapse the original line */
}

.element::after {
  content: "New text";
  text-indent: 0;
  display: block;
  line-height: initial; /* New content takes up original line height */
}

JSFiddle उदाहरण

Comments

यह उत्तर उन स्थानों पर काम करता है जहां कई अन्य उत्तर किसी <th>तत्व के अंदर पाठ नोड्स जैसे नहीं हैं ।

— क्रिस Kerekes

यह अच्छा काम करता है। मेरे मामले में, line-height: 0और color: transparentमुख्य तत्व पर और उन मानों को छद्म पर रीसेट करना काम करते हैं (कोई text-indent

— फ़िज़लिंग

line-height: normalइसके बजाय नहीं होना चाहिए initial?

— बेंजामिन

पाठ-इंडेंट का उपयोग करने का कारण यह है कि यदि मूल पाठ अधिक लंबा है, तो तत्व पुराने पाठ के आकार का बना रहता है, नए पाठ के आकार तक सिकुड़ता नहीं है (यह मानकर कि आप क्या चाहते हैं)

— क्रिस जैन्सेन

पाठ-इंडेंट: -9999px; IE पर काम करता है। जबकि दृश्यता: छिपी हुई; विधि IE पर काम नहीं करता है।

— टॉम स्टरिट्ज़

Answer 4

मीकेमेकाना के उत्तर के आधार पर , इसने मेरे लिए काम किया

button {
  position: absolute;
  visibility: hidden;
}

button:before {
  content: "goodbye";
  visibility: visible;
}

§ पूर्ण स्थिति

एक तत्व जो बिल्कुल तैनात है, उसे प्रवाह से बाहर ले जाया जाता है और इस तरह अन्य तत्वों को रखने पर कोई स्थान नहीं लेता है।

Comments

मेरे लिए यह उत्तर दूसरों से बेहतर था क्योंकि यह एक ही पंक्ति में एक पाठ प्रतिस्थापन के साथ काम करता है, अर्थात यह पाठ में एक पंक्ति विराम (HTML और CSS के मेरे विशेष संयोजन के लिए) को बाध्य नहीं करता है।

— PGR

Answer 5

यह सरल, छोटा और प्रभावी है। कोई अतिरिक्त HTML आवश्यक नहीं है।

.pvw-title { color: transparent; }

.pvw-title:after {
        content: "New Text To Replace Old";
        color: black; /* set color to original text color */
        margin-left: -30px;
        /* margin-left equals length of text we're replacing */
    }

मुझे ऐसा करने के लिए लिंक पाठ की जगह, घर के अलावा, WooCommerce के लिए करना पड़ा ब्रेडक्रंब के

सास / कम

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
    color: transparent;
    &:after {
        content: "Store";
        color: grey;
        margin-left: -30px;
    }
}

सीएसएस

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
    color: transparent;
}

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"]&:after {
    content: "Store";
    color: @child-color-grey;
    margin-left: -30px;
}

Answer 6

आप नहीं कर सकते, ठीक है, आप कर सकते हैं।

.pvw-title:after {
  content: "Test";
}

यह तत्व की वर्तमान सामग्री के बाद सामग्री सम्मिलित करेगा । यह वास्तव में इसे प्रतिस्थापित नहीं करता है, लेकिन आप एक खाली div के लिए चुन सकते हैं, और सभी सामग्री को जोड़ने के लिए CSS का उपयोग कर सकते हैं।

लेकिन जब आप कम या ज्यादा कर सकते हैं, तो आपको नहीं करना चाहिए। वास्तविक सामग्री को दस्तावेज़ में रखा जाना चाहिए। सामग्री गुण मुख्य रूप से छोटे मार्कअप के लिए अभिप्रेत है, जैसे कि पाठ के चारों ओर उद्धरण चिह्नों को उद्धृत किया जाना चाहिए।

Comments

मुझे इस बात पर पूरा यकीन है कि मैंने उस पद्धति के साथ पाठ को बदलने के लिए एक कोड का उपयोग किया था .. '<div class = "pvw-title"> तथ्य </ div> <div class = "pvw-title"> तथ्य </ div> 'मैं उपयोग नहीं कर सकता: क्योंकि, मैं एक ही नाम के साथ एक से अधिक div वर्ग मिला :(

— MokiTa

ब्राउज़रों के लिए यह कितना व्यापक है? और मुझे संदेह है कि जावास्क्रिप्ट इस तरह के लचीलेपन के लिए एक बेहतर विकल्प है।

— सर

आधुनिक ब्राउज़र इसका समर्थन करते हैं। मुझे पुराने IE संस्करणों के बारे में निश्चित नहीं है, लेकिन मुझे लगता है कि quirksmode.com पर देखा जा सकता है। -edit- यह कर सकते हैं: quirksmode.org/css/user-interface/content.html

— GolezTrol

Answer 7

उपयोग करने का प्रयास :beforeऔर:after । HTML को रेंडर करने के बाद एक टेक्स्ट सम्मिलित करता है, और HTML को प्रस्तुत करने से पहले दूसरा आवेषण। यदि आप पाठ को बदलना चाहते हैं, तो बटन सामग्री को खाली छोड़ दें।

यह उदाहरण स्क्रीन की चौड़ाई के आकार के अनुसार बटन टेक्स्ट सेट करता है।

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
  button:before {
    content: 'small screen';
  }
  @media screen and (min-width: 480px) {
    button:before {
      content: 'big screen';
    }
  }
</style>
<body>
  <button type="button">xxx</button>
  <button type="button"></button>
</body>

टेक्स्ट बटन:

1. साथ में :before

   बड़ी पटकथा

   बड़ा पर्दा

2. साथ में :after

   xxxbig स्क्रीन

   बड़ा पर्दा

Answer 8

यदि आप केवल अलग-अलग पाठ या चित्र दिखाना चाहते हैं, तो टैग को खाली रखें और उस जैसी कई डेटा विशेषताओं में अपनी सामग्री लिखें<span data-text1="Hello" data-text2="Bye"></span> । उन्हें छद्म वर्गों में से एक के साथ प्रदर्शित करें:before {content: attr(data-text1)}

अब आपके पास उनके बीच स्विच करने के लिए विभिन्न तरीकों का एक गुच्छा है। मैंने अपने नेविगेशन के नामों को आइकन में बदलने के लिए उत्तरदायी डिज़ाइन दृष्टिकोण के लिए मीडिया प्रश्नों के संयोजन में उनका उपयोग किया।

jsfiddle प्रदर्शन और उदाहरण

_{यह पूरी तरह से सवाल का जवाब नहीं दे सकता है, लेकिन इसने मेरी जरूरतों को पूरा किया और शायद दूसरों को भी।}

Answer 9

मैं बेहतर की स्थापना किस्मत ने font-size: 0बाहरी तत्व की, और font-sizeके :afterचयनकर्ता मैं जो कुछ भी जरूरत है।

Comments

यह अच्छा काम करता है। यहाँ एक डेमो है ।

— आर्थर

Answer 10

यह मेरे लिए इनलाइन टेक्स्ट के साथ काम करता है। यह फ़ायरफ़ॉक्स, सफारी, क्रोम और ओपेरा में परीक्षण किया गया था।

<p>Lorem ipsum dolor sit amet, consectetur <span>Some Text</span> adipiscing elit.</p>

span {
    visibility: hidden;
    word-spacing: -999px;
    letter-spacing: -999px;
}

span:after {
    content: "goodbye";
    visibility: visible;
    word-spacing: normal;
    letter-spacing: normal;
}

Comments

मेरे लिए कम से कम IE 9 में 11 के माध्यम से काम नहीं करता है, क्योंकि यह "दृश्यता: दृश्यमान" को अनदेखा करने के कारण है: तत्व के बाद: stackoverflow.com/questions/17530947/…

— तबिक्यूड

Answer 11

मैं इस ट्रिक का उपयोग करता हूं:

.pvw-title {
    text-indent: -999px;
}
.pvw-title:after {
    text-indent: 0px;
    float: left;
    content: 'My New Content';
}

मैं भी सिर्फ एक आधार वर्ग बदलकर पृष्ठों के अंतर्राष्ट्रीयकरण को संभालने के लिए इसका इस्तेमाल किया है ...

.translate-es .welcome {
    text-indent: -999px;
}
.translate-es .welcome:after {
    text-indent: 0px;
    float: left;
    content: '¡Bienvenidos!';
}

Comments

यह स्क्रीन रीडर वाले उपयोगकर्ताओं के लिए समस्याग्रस्त है। यदि आप तत्व की अव्यवस्थित / दृश्यता को नहीं बदलते हैं और कोई भी संकेत नहीं देते हैं, तो आपका "अदृश्य" पाठ अभी भी स्क्रीन रीडर द्वारा पढ़ा जा सकता है।

— कॉन्सपिसीसस कंपाइलर

Answer 12

छद्म तत्वों और सीएसएस दृश्यता के साथ पाठ प्रतिस्थापन

एचटीएमएल

<p class="replaced">Original Text</p>

सीएसएस

.replaced {
    visibility: hidden;
    position: relative;
}

.replaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

Answer 13

एक छद्म तत्व का उपयोग करते हुए, इस विधि को मूल तत्व के ज्ञान की आवश्यकता नहीं होती है और किसी भी अतिरिक्त मार्कअप की आवश्यकता नहीं होती है।

#someElement{
    color: transparent; /* You may need to change this color */
    position: relative;
}
#someElement:after { /* Or use :before if that tickles your fancy */
    content: "New text";
    color: initial;
    position: absolute;
    top: 0;
    left: 0;
}

Answer 14

यह एक चेकबॉक्स को एक बटन के रूप में कार्यान्वित करता है जो या तो हां या नहीं दिखाता है जो इसकी 'चेक की गई स्थिति पर निर्भर करता है। तो यह बिना किसी कोड को लिखे सीएसएस का उपयोग करके पाठ को बदलने का एक तरीका प्रदर्शित करता है।

यह अभी भी एक चेकबॉक्स की तरह व्यवहार करेगा जहाँ तक लौटकर (या वापस नहीं) एक POST मान होगा, लेकिन प्रदर्शन के दृष्टिकोण से यह एक टॉगल बटन जैसा दिखता है।

रंग आपकी पसंद के अनुसार नहीं हो सकते हैं, वे केवल एक बिंदु को चित्रित करने के लिए हैं।

HTML है:

<input type="checkbox" class="yesno" id="testcb" /><label for="testcb"><span></span></label>

... और सीएसएस है:

/* --------------------------------- */
/* Make the checkbox non-displayable */
/* --------------------------------- */
input[type="checkbox"].yesno {
    display:none;
}
/* --------------------------------- */
/* Set the associated label <span>   */
/* the way you want it to look.      */
/* --------------------------------- */
input[type="checkbox"].yesno+label span {
    display:inline-block;
    width:80px;
    height:30px;
    text-align:center;
    vertical-align:middle;
    color:#800000;
    background-color:white;
    border-style:solid;
    border-width:1px;
    border-color:black;
    cursor:pointer;
}
/* --------------------------------- */
/* By default the content after the  */
/* the label <span> is "No"          */
/* --------------------------------- */
input[type="checkbox"].yesno+label span:after {
    content:"No";
}
/* --------------------------------- */
/* When the box is checked the       */
/* content after the label <span>    */
/* is "Yes" (which replaces any      */
/* existing content).                */
/* When the box becomes unchecked the*/
/* content reverts to the way it was.*/
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span:after {
    content:"Yes";
}
/* --------------------------------- */
/* When the box is checked the       */
/* label <span> looks like this      */
/* (which replaces any existing)     */
/* When the box becomes unchecked the*/
/* layout reverts to the way it was. */
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span {
    color:green;
    background-color:#C8C8C8;
}

मैंने इसे केवल फ़ायरफ़ॉक्स पर आज़माया है, लेकिन यह मानक सीएसएस है इसलिए इसे कहीं और काम करना चाहिए।

Answer 15

हर एक दूसरे उत्तर में मुझे जो दिखता है, उसके विपरीत, आपको एक छवि के साथ टैग की सामग्री को बदलने के लिए छद्म तत्वों का उपयोग करने की आवश्यकता नहीं है

<div class="pvw-title">Facts</div>

    div.pvw-title { /* No :after or :before required */
        content: url("your URL here");
    }

Comments

CSS2 के रूप में, contentकेवल :beforeऔर के लिए लागू होता है :after। CSS3 इसे हर चीज तक बढ़ाता है, लेकिन जेनरेट किया गया कंटेंट मॉड्यूल अभी भी ड्राफ्ट की स्थिति में है, इसलिए किसी भी उपयोग को ब्राउज़र-निर्भर होने की अत्यधिक संभावना है।

— mcc

"बालिस" क्या है ? नहीं " 1. (यूरोपीय ट्रेन नियंत्रण प्रणाली) एक इलेक्ट्रॉनिक बीकन या एक रेल की पटरियों के बीच रखा ट्रांसपोंडर " , मुझे लगता है। (कृपया अपने प्रश्न का संपादन करके जवाब दें , यहाँ टिप्पणियों में नहीं।)

— पीटर मोर्टेंसन

Answer 16

यह वास्तव में चाल के बिना संभव नहीं है। यहां एक तरीका है जो पाठ को छवि की जगह पाठ से बदलकर काम करता है।

.pvw-title{
    text-indent: -9999px;
    background-image: url(text_image.png)
}

इस तरह की बात आमतौर पर जावास्क्रिप्ट के साथ की जाती है। यहाँ है कि यह jQuery के साथ कैसे किया जा सकता है:

$('.pvw-title').text('new text');

Comments

मैं जावास्क्रिप्ट का उपयोग नहीं कर सकता: /

— मोकिता

यह एकमात्र तरीका है जो मुझे लगता है कि यह काम कर सकता है: .pvw- शीर्षक अवधि [शैली * = "रंग: # 000, फ़ॉन्ट-आकार: 14px;"] {दृश्यता: छिपी; } .pvw- शीर्षक अवधि [शैली * = "रंग: # 000; फ़ॉन्ट-आकार: 14px;"]: {दृश्यता के बाद; रंग: # 000; font-size: 14px; सामग्री: "टेस्ट"; } लेकिन, जब से वे दोनों एक ही शैली का उपयोग कर रहे हैं, मैं यह नहीं कर सकता ..: /

— MokiTa

आप रंग / फ़ॉन्ट के आधार पर इसका चयन क्यों करेंगे?

— नाथन मंसोस

मैं इसे पूरी शैली के आधार पर चुनूंगा, इसलिए मैं उस विशिष्ट शीर्षक को संपादित कर सकता हूं और दोनों को नहीं, क्योंकि दोनों का एक ही "div" नाम है।

— मोकिता

Answer 17

मेरे पास एक मुद्दा था जहां मुझे लिंक के पाठ को बदलना था, लेकिन मैं जावास्क्रिप्ट का उपयोग नहीं कर सकता था और न ही मैं सीधे हाइपरलिंक के पाठ को बदल सकता था क्योंकि इसे एक्सएमएल से संकलित किया गया था। इसके अलावा, मैं छद्म तत्वों का उपयोग नहीं कर सका, या जब मैंने उन्हें कोशिश की थी तो वे काम नहीं कर रहे थे।

मूल रूप से, मैंने एक पाठ को एक स्पैन में रखा और उसके नीचे लंगर टैग लगाया और दोनों को एक डिव में लपेट दिया। मैंने मूल रूप से एंकर टैग को सीएसएस के माध्यम से ऊपर ले जाया और फिर फ़ॉन्ट को पारदर्शी बना दिया। अब जब आप स्पान पर होवर करते हैं, तो यह एक लिंक की तरह "कार्य" करता है। ऐसा करने का वास्तव में एक हैकिंग तरीका है, लेकिन यह है कि आप अलग-अलग पाठ के साथ लिंक कैसे कर सकते हैं ...

यह इस मुद्दे के आसपास मुझे कैसे मिला, यह एक पहेली है

मेरा HTML

<div class="field">
    <span>This is your link text</span><br/>
    <a href="//www.google.com" target="_blank">This is your actual link</a>
</div>

मेरा सीएसएस

 div.field a {
     color: transparent;
     position: absolute;
     top:1%;
 }
 div.field span {
     display: inline-block;
 }

सीएसएस को आपकी आवश्यकताओं के आधार पर बदलने की आवश्यकता होगी, लेकिन यह एक सामान्य तरीका है जो आप पूछ रहे हैं।

Comments

@AlmightWhy मुझे संदेह है कि इसे डाउनवोट किया गया था क्योंकि इस समाधान के लिए मार्कअप को संशोधित करने की आवश्यकता है और मुझे संदेह है कि यदि ओपी मार्कअप को संशोधित कर सकता है, तो वह सीधे पाठ को बदल देगा। दूसरे शब्दों में, ओपी

— dannie.f

Answer 18

मुझे इस तरह से एक समाधान मिला जहां एक शब्द, "डार्क", को छोटे स्क्रीन की चौड़ाई पर सिर्फ "डी" तक छोटा किया जाएगा। मूल रूप से आप बस मूल सामग्री का फ़ॉन्ट आकार बनाते हैं और छद्म तत्व के रूप में छोटा रूप रखते हैं।

इस उदाहरण में परिवर्तन हॉवर पर होता है बजाय:

span {
  font-size: 12px;
}

span:after {
  display: none;
  font-size: 12px;
  content: 'D';
  color: red;
}

span:hover {
  font-size: 0px;
}

span:hover:after {
  display: inline;
}

<span>Dark</span>

Answer 19

आठ साल बाद, मुझे उसी चुनौती का सामना करना पड़ा जब मैं स्टाइलिश का उपयोग करने की कोशिश कर रहा था एक वेबसाइट (मेरा नहीं) पर कुछ बदलने के ब्राउज़र एक्सटेंशन का । और इस बार मैंने "निरीक्षण तत्व" का उपयोग करके स्रोत कोड को देखकर काम किया और उसी के आधार पर CSS कोड बनाया।

यह वह है जो पहले जैसा दिखता था:

<table>
  <tbody>
    <tr>
      <td role="gridcell">
        <span title="In progress" style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;">In progress</span>
      </td>
    </tr>
  </tbody>
</table>

यह HTML और CSS का वही टुकड़ा है जिसका उपयोग मैंने शैली को संशोधित करने के लिए किया था:

td span[style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;"] {
  width: 100px!important;
}

<table>
  <tbody>
    <tr>
      <td role="gridcell">
        <span title="In progress" style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;">In progress</span>
      </td>
    </tr>
  </tbody>
</table>

आप ऊपर कोड चला सकते हैं और आप देखेंगे कि यह काम करता है (क्रोम में परीक्षण)।

---

_{यह वही है जो मैं उन दिनों में वापस चाहता था जब मैंने यह सवाल पूछा था।}

_{मैं कुछ प्रकार के सामुदायिक ब्लॉग / माइस्पेस का उपयोग कर रहा था समान सामान और आपकी प्रोफ़ाइल को स्टाइल करते समय केवल एक चीज आपके सीएसएस संपादक थी, और इसीलिए मैं इसे शैली के आधार पर चुनना चाहता था।}

मुझे यहाँ उत्तर मिला:

• उन्नत सीएसएस चयनकर्ता - स्टाइल के आधार पर चयन करें

• इनलाइन शैली विशेषता द्वारा सीएसएस चयनकर्ता

Answer 20

इस काम को करने का तरीका सीएसएस सामग्री में लाइन-ऊंचाई को जोड़ना है। यह ब्लॉक को छिपे हुए ऊपर देखा जाएगा, इस प्रकार यह बदले हुए पाठ को छिपाएगा नहीं।

पहले उपयोग के साथ उदाहरण :

.pvw-title span {
  display: none;
}

.pvw-title:before {
  content: 'Whatever it is you want to add';
  line-height: 1.5em
}

Answer 21

खैर, जैसा कि कई ने कहा कि यह एक हैक है। हालाँकि, मैं और अधिक अप-टू-डेट हैक जोड़ना चाहूंगा, जिसका लाभ उठाएं flexboxऔर rem, अर्थात

• आप इस पाठ को मैन्युअल रूप से बदलना नहीं चाहते हैं, इसीलिए आप इसका लाभ उठाना चाहेंगे flexbox
• आप स्पष्ट रूप से उपयोग करने के लिए paddingऔर / या marginपाठ का उपयोग नहीं करना चाहते हैं px, जो विभिन्न उपकरणों और ब्राउज़रों पर अलग-अलग स्क्रीन आकार के लिए अलग-अलग आउटपुट दे सकते हैं

यहाँ समाधान है, संक्षेप में flexboxयह सुनिश्चित करता है कि यह स्वचालित रूप से पूरी तरह से तैनात है और remपिक्सल के लिए अधिक मानकीकृत (और स्वचालित) विकल्प है।

नीचे दिए गए कोड और स्क्रीनशॉट के रूप में आउटपुट के साथ कोडसैंडबॉक्स , कृपया noteनीचे दिए गए कोड को पढ़ें !

h1 {
  background-color: green;
  color: black;
  text-align: center;
  visibility: hidden;
}
h1:after {
  background-color: silver;
  color: yellow;
  content: "This is my great text AFTER";
  display: flex;
  justify-content: center;
  margin-top: -2.3rem;
  visibility: visible;
}
h1:before {
  color: blue;
  content: "However, this is a longer text to show this example BEFORE";
  display: flex;
  justify-content: center;
  margin-bottom: -2.3rem;
  visibility: visible;
}

नोट: अलग-अलग टैग के लिए आपको अलग-अलग मूल्यों की आवश्यकता हो सकती है rem, यह h1केवल और बड़े स्क्रीन पर ही उचित है। हालाँकि @mediaआप इसे आसानी से मोबाइल उपकरणों तक बढ़ा सकते हैं।