ฉันจะแทนที่ข้อความด้วย CSS ได้อย่างไร

321

ฉันจะแทนที่ข้อความด้วย CSS โดยใช้วิธีดังนี้:

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

แทน ( img[src*="IKON.img"] ) ฉันต้องใช้สิ่งที่สามารถแทนที่ข้อความแทน

ฉันต้องใช้[ ]เพื่อให้มันทำงาน

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

ฉันต้องการแทนที่ " ข้อเท็จจริง "

css text replace

— MokiTa
แหล่งที่มา

ความจริงแล้วมันเป็นการดีที่สุดที่จะใช้จาวาสคริปต์สำหรับสิ่งนี้

— เซอร์

การใช้ Javascript จำเป็นต้องโหลด DOM จึงมี FOUC ฉันต้องการทำสิ่งนี้เพื่อแทนที่ข้อความด้วยเนื้อหาที่แยกออกจากสตริงการสืบค้นขณะที่หลีกเลี่ยง FOUC โดยไม่ต้องสร้างฝั่งเซิร์ฟเวอร์ HTML (ดังนั้นการอนุญาตให้ HTML แคชไว้อย่างจริงจังและแสดงผลจาก CDN)

— nemequ

32

คำถามคือทำอย่างไรกับ CSS ฉันกำลังใช้ CMS ที่อนุญาตให้ฉันเปลี่ยน CSS เท่านั้นซึ่งเป็นสาเหตุที่ฉันมาที่หน้านี้ในขณะที่ googling สำหรับคำตอบไม่ใช่อย่างอื่น นั่นคือเหตุผลที่เราตอบคำถามที่ถูกถามแทนที่จะถามว่าทำไมสถานการณ์ของผู้ถามจึงไม่แตกต่างกัน

— felwithe

291

หรือบางทีคุณอาจล้อมรอบ 'ข้อเท็จจริง' <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';
}

— Matthew Cachia
แหล่งที่มา

52

เยี่ยมมาก แต่นั่นเป็นการเปลี่ยนแปลง HTML แทนที่จะเป็นเพียง CSS

— mikemaccana

22

บางครั้งเป็นตัวเลือกเดียวของคุณ

— locrizak

4

ช่วง {display: none; } ควรซ่อนองค์ประกอบปลอมด้วย คุณควรใช้การเปิดเผย: ซ่อนไว้

— xryl669

2

แสดง: ไม่มี; และทัศนวิสัย: ซ่อนอยู่ ทั้งซ่อนองค์ประกอบหลอก

— Facundo Colombier

10

@Mathew ซ่อนอยู่ช่วง แต่การเพิ่มองค์ประกอบหลอกเพื่อ div ดังนั้นองค์ประกอบหลอกไม่ควรซ่อน (โดยใช้การมองเห็นหรือคุณสมบัติการแสดงผล)

— dewtea

249

ข้อผูกมัด : นี่คือแฮ็ค: CSS ไม่ใช่สถานที่ที่เหมาะสมในการทำสิ่งนี้ แต่ในบางสถานการณ์ - เช่นคุณมีห้องสมุดบุคคลที่สามใน iframe ที่สามารถปรับแต่งโดย CSS เท่านั้น - การแฮ็กชนิดนี้เป็นตัวเลือกเท่านั้น .

คุณสามารถแทนที่ข้อความผ่าน 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เกี่ยวกับองค์ประกอบดั้งเดิมไม่ทำงาน

— mikemaccana
แหล่งที่มา

2

มันใช้งานไม่ได้ใน 10 เช่นความคิดใด ๆ วิธีการปรับเปลี่ยนให้ทำเช่นนั้น?

— Solmead

49

display: none;ไม่ทำงานเพราะ::afterจริงๆหมายถึง“ ภายในองค์ประกอบนี้ แต่ท้ายที่สุด” ในกรณีที่มีใครอยากรู้อยากเห็น

— Ry-

4

น่าเสียดายที่ปุ่ม "แก้ไข" ไม่ทำงานเหมือนปุ่มอีกต่อไป มันเป็นตัวอย่างที่ดีเพียงว่ามันใช้ไม่ได้กับปุ่ม

— xryl669

1

แสดง: ไม่มี; และทัศนวิสัย: ซ่อนอยู่ ทั้งซ่อนองค์ประกอบหลอก

— Facundo Colombier

ทำไมเมื่อฉันทำเช่นนี้มันจะแทนที่องค์ประกอบ แต่ข้อความเป็นตัวพิมพ์ใหญ่ทั้งหมดและไม่สามารถเปลี่ยนเป็นตัวพิมพ์เล็กได้

— Jpaji Rajnish

159

หากคุณยินดีที่จะใช้องค์ประกอบเทียมและให้พวกเขาแทรกเนื้อหาคุณสามารถทำสิ่งต่อไปนี้ ไม่ถือว่าความรู้เกี่ยวกับองค์ประกอบดั้งเดิมและไม่ต้องการมาร์กอัปเพิ่มเติม

.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

— James van Dyke
แหล่งที่มา

1

คำตอบนี้ใช้ได้ในสถานที่ที่คำตอบอื่น ๆ ไม่เช่นโหนดข้อความภายใน<th>องค์ประกอบ

— Chris Kerekes

5

มันใช้งานได้ดี ในกรณีของฉันline-height: 0และcolor: transparentในองค์ประกอบหลักและการรีเซ็ตค่าเหล่านั้นในการหลอกทำงาน (เล่นซอกับไม่มีtext-indent)

— dontGoPlastic

1

มันควรจะเป็นline-height: normalแทนinitialหรือไม่?

— Benjamin

1

เหตุผลในการใช้การเยื้องข้อความคือถ้าข้อความต้นฉบับยาวกว่าองค์ประกอบจะยังคงขนาดของข้อความเก่าโดยไม่ย่อขนาดของข้อความใหม่ (สมมติว่านั่นคือสิ่งที่คุณต้องการ)

— Chris Janssen

ข้อความเยื้อง: -9999px; ทำงานบน IE ในขณะที่ทัศนวิสัย: ซ่อนอยู่; วิธีการไม่ทำงานบน IE

— Tom Stermitz

57

ตาม คำตอบของ mikemaccanaสิ่งนี้ได้ผลสำหรับฉัน

button {
  position: absolute;
  visibility: hidden;
}

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

positioning ตำแหน่งแน่นอน

องค์ประกอบที่อยู่ในตำแหน่งถูกนำออกมาอย่างไหลจึงไม่ต้องใช้พื้นที่เมื่อวางองค์ประกอบอื่น

— สตีเวนเพนนี
แหล่งที่มา

2

สำหรับฉันคำตอบนี้เหนือกว่าผู้อื่นเพราะใช้ได้กับการแทนที่ข้อความภายในบรรทัดเดียวกันนั่นคือมันไม่ได้บังคับให้มีการแบ่งบรรทัดในข้อความ

— pgr

30

สิ่งนี้ง่ายสั้นและมีประสิทธิภาพ ไม่จำเป็นต้องใช้ 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 */
    }

ฉันต้องทำสิ่งนี้เพื่อแทนที่ข้อความลิงค์นอกเหนือจากที่บ้านเพื่อใช้กับbreadcrumb ของWooCommerce

Sass / น้อยลง

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

CSS

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;
}

— hawkeye126
แหล่งที่มา

22

คุณทำไม่ได้คุณทำได้

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

สิ่งนี้จะแทรกเนื้อหาหลังเนื้อหาปัจจุบันขององค์ประกอบ ไม่ได้แทนที่จริง ๆ แต่คุณสามารถเลือก div ที่ว่างเปล่าและใช้ CSS เพื่อเพิ่มเนื้อหาทั้งหมด

แต่ในขณะที่คุณสามารถมากหรือน้อยคุณไม่ควร ควรใส่เนื้อหาจริงลงในเอกสาร คุณสมบัติเนื้อหาส่วนใหญ่มีไว้สำหรับมาร์กอัปขนาดเล็กเช่นเครื่องหมายคำพูดรอบข้อความที่ควรปรากฏในเครื่องหมายคำพูด

— GolezTrol
แหล่งที่มา

ฉันแน่ใจมากเกี่ยวกับว่าฉันใช้รหัสเพื่อแทนที่ข้อความด้วยวิธีการนั้น .. '<div class = "pvw-title"> Facts </div> <div class = "pvw-title"> Facts </ div> 'ฉันไม่สามารถใช้งานได้: หลังจากนั้นเพราะฉันได้รับมากกว่าหนึ่งคลาส div ที่มีชื่อเดียวกัน :(

— MokiTa

มีความเข้ากันได้กับเบราว์เซอร์อย่างไร และฉันสงสัยว่าจาวาสคริปต์จะเป็นตัวเลือกที่ดีในระยะยาวสำหรับความยืดหยุ่นประเภทนี้

— เซอร์

เบราว์เซอร์สมัยใหม่รองรับ ฉันไม่แน่ใจเกี่ยวกับ IE เวอร์ชันเก่า แต่ฉันเดาว่าสามารถค้นหาได้จาก quirksmode.com -edit- มันสามารถ: quirksmode.org/css/user-interface/content.html

— GolezTrol

15

ลองใช้และ: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>

ข้อความของปุ่ม:

กับ :before

หน้าจอขนาดใหญ่ xxx

จอใหญ่
กับ :after

หน้าจอ xxxbig

จอใหญ่

— ชีวิตความรัก
แหล่งที่มา

11

หากคุณเพียงแค่ต้องการที่จะแสดงข้อความที่แตกต่างกันหรือภาพให้แท็กที่ว่างเปล่าและเขียนเนื้อหาของคุณในข้อมูลหลายคุณลักษณะ<span data-text1="Hello" data-text2="Bye"></span>เช่นเดียวกับที่ แสดงพวกเขาด้วยหนึ่งในชั้นเรียนหลอก:before {content: attr(data-text1)}

ตอนนี้คุณมีหลายวิธีที่จะสลับไปมาระหว่างกัน ฉันใช้มันร่วมกับการสืบค้นสื่อสำหรับวิธีการออกแบบที่ตอบสนองต่อการเปลี่ยนชื่อของการนำทางของฉันเป็นไอคอน

การสาธิต jsfiddle และตัวอย่าง

_{มันอาจไม่ตอบคำถามได้อย่างสมบูรณ์แบบ แต่มันก็ตอบสนองความต้องการของฉันและคนอื่น ๆ ด้วย}

— Robbendebiene
แหล่งที่มา

10

ฉันมีการตั้งค่าโชคดีขึ้นfont-size: 0ขององค์ประกอบด้านนอกและfont-sizeของ:afterตัวเลือกเพื่อสิ่งที่ฉันต้องการ

— เจอโรม
แหล่งที่มา

1

มันใช้งานได้ดี นี่คือการสาธิต

— อาเธอร์

9

สิ่งนี้ใช้ได้กับฉันด้วยข้อความอินไลน์ มีการทดสอบใน Firefox, Safari, Chrome และ Opera

<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;
}

— ประสานเสียงวิลเลียมส์
แหล่งที่มา

2

ไม่ทำงานสำหรับฉันอย่างน้อย IE 9 ถึง 11 เนื่องจากไม่สนใจ "การมองเห็น: ที่มองเห็นได้" บน: หลังจากองค์ประกอบ: stackoverflow.com/questions/17530947/…

— ickdude

8

ฉันใช้เคล็ดลับนี้:

.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!';
}

— พีทโอเค
แหล่งที่มา

3

นี่เป็นปัญหาสำหรับผู้ใช้ที่มีโปรแกรมอ่านหน้าจอ หากคุณไม่เปลี่ยนความไม่สุภาพ / การมองเห็นขององค์ประกอบและไม่ได้ให้คำแนะนำใด ๆ อาเรียข้อความ "มองไม่เห็น" ของคุณอาจยังคงอ่านโดยโปรแกรมอ่านหน้าจอ

— Compiler ที่เห็นได้ชัดเจน

8

การแทนที่ข้อความด้วยองค์ประกอบเทียมและการมองเห็น CSS

HTML

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

CSS

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

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

— Ahsan Aftab
แหล่งที่มา

3

การใช้องค์ประกอบปลอมวิธีนี้ไม่จำเป็นต้องมีความรู้เกี่ยวกับองค์ประกอบดั้งเดิมและไม่จำเป็นต้องมีมาร์กอัปเพิ่มเติม

#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;
}

— Vin
แหล่งที่มา

2

ใช้ช่องทำเครื่องหมายเป็นปุ่มซึ่งจะแสดงว่าใช่หรือไม่ขึ้นอยู่กับสถานะ 'ตรวจสอบ' ดังนั้นมันจึงแสดงวิธีหนึ่งในการแทนที่ข้อความด้วย CSS โดยไม่ต้องเขียนโค้ดใด ๆ

มันจะยังคงทำตัวเหมือนช่องทำเครื่องหมายเท่าที่คืน (หรือไม่กลับ) ค่า POST แต่จากมุมมองที่แสดงดูเหมือนว่าปุ่มสลับ

สีอาจไม่ถูกใจคุณมีเพียงเพื่อแสดงจุด

HTML คือ:

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

... และ CSS คือ:

/* --------------------------------- */
/* 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;
}

ฉันได้ลองใช้กับ Firefox เท่านั้น แต่เป็น CSS มาตรฐานดังนั้นจึงควรทำงานที่อื่น

— สตีฟดักลาส
แหล่งที่มา

2

ต่างจากที่ฉันเห็นในคำตอบอื่น ๆ ทุกครั้งคุณไม่จำเป็นต้องใช้องค์ประกอบหลอกเพื่อแทนที่เนื้อหาของแท็กด้วยรูปภาพ

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

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

— Estecka
แหล่งที่มา

2

ตั้งแต่ CSS2 contentจะใช้กับ:beforeและ:afterเท่านั้น CSS3 ขยายไปถึงทุกอย่าง แต่โมดูลเนื้อหาที่สร้างยังคงอยู่ในสถานะร่างดังนั้นการใช้งานใด ๆ ที่มีแนวโน้มสูงที่จะขึ้นอยู่กับเบราว์เซอร์

— mrec

1

คืออะไร"balise" ? ไม่ใช่" 1. (ระบบควบคุมรถไฟยุโรป) สัญญาณหรือช่องสัญญาณอิเล็กทรอนิกส์ที่วางระหว่างรางของรางรถไฟ "ฉันเข้าใจ (โปรดตอบโดยแก้ไขคำถามของคุณไม่ใช่ที่นี่ในความคิดเห็น).

— Peter Mortensen

1

นี่เป็นไปไม่ได้เลยหากไม่มีลูกเล่น นี่คือวิธีที่ใช้งานได้โดยแทนที่ข้อความด้วยภาพข้อความ

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

โดยทั่วไปแล้วสิ่งประเภทนี้จะทำกับ JavaScript นี่คือวิธีที่สามารถทำได้ด้วย jQuery:

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

— Nathan Manousos
แหล่งที่มา

3

ฉันไม่สามารถใช้ Javascript อย่างใดอย่างหนึ่ง: /

— MokiTa

1

นี่เป็นวิธีเดียวที่ฉันคิดว่าสามารถใช้งานได้: .pvw-title span [style * = "color: # 000, ขนาดตัวอักษร: 14px;"] {การมองเห็น: ซ่อนอยู่; } .pvw-title span [style * = "color: # 000; ขนาดตัวอักษร: 14px;"]: หลังจาก {การมองเห็น: มองเห็นได้; color: # 000; font-size: 14px; เนื้อหา: "ทดสอบ"; } แต่เนื่องจากทั้งคู่ใช้สไตล์เดียวกันฉันไม่สามารถทำได้ .. : /

— MokiTa

เหตุใดคุณจึงเลือกใช้ตามสี / แบบอักษร

— Nathan Manousos

ฉันจะเลือกตามสไตล์ทั้งหมดดังนั้นฉันจึงสามารถแก้ไขชื่อเฉพาะนั้นและไม่ใช่ทั้งสองเนื่องจากชื่อทั้งคู่มีชื่อ "div" เหมือนกัน

— MokiTa

1

ฉันมีปัญหาที่ฉันต้องแทนที่ข้อความของลิงก์ แต่ฉันไม่สามารถใช้ JavaScript หรือฉันไม่สามารถเปลี่ยนข้อความของไฮเปอร์ลิงก์โดยตรงได้เนื่องจากมันถูกรวบรวมจาก XML นอกจากนี้ฉันไม่สามารถใช้องค์ประกอบหลอกหรือพวกเขาดูเหมือนจะไม่ทำงานเมื่อฉันลองพวกเขา

โดยทั่วไปฉันใส่ข้อความที่ฉันต้องการในช่วงและวางแท็กสมออยู่ข้างใต้และห่อทั้งใน div ฉันขยับแท็กจุดยึดโดยใช้ CSS และทำให้ตัวอักษรโปร่งใส ตอนนี้เมื่อคุณเลื่อนเมาส์ไปวางเหนือช่วงเวลามันจะ "ทำงาน" เหมือนลิงก์ วิธีแฮ็กจริง ๆ ในการทำเช่นนี้ แต่นี่คือวิธีที่คุณสามารถมีลิงก์ที่มีข้อความแตกต่างกัน ...

นี่คือปริศนาว่าฉันจะแก้ไขปัญหานี้ได้อย่างไร

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>

CSS ของฉัน

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

CSS จะต้องเปลี่ยนตามความต้องการของคุณ แต่นี่เป็นวิธีทั่วไปในการทำสิ่งที่คุณถาม

— AlmightyWhy
แหล่งที่มา

1

@ แสงทำไมฉันสงสัยว่านี่เป็นเพราะการลงคะแนนแก้ปัญหานี้ต้องแก้ไขมาร์กอัปและฉันสงสัยว่า OP สามารถแก้ไขมาร์กอัปเขา / เธอจะเปลี่ยนข้อความโดยตรง กล่าวอีกนัยหนึ่ง OP ต้องการโซลูชัน CSS เท่านั้น

— dannie.f

1

ฉันพบวิธีแก้ปัญหาเช่นนี้ซึ่งคำว่า "Dark" จะถูกย่อให้เหลือเพียง "D" บนความกว้างหน้าจอที่เล็กลง โดยทั่วไปคุณเพียงแค่ทำให้ขนาดตัวอักษรของเนื้อหาดั้งเดิม 0 และมีรูปแบบที่สั้นลงเป็นองค์ประกอบปลอม

ในตัวอย่างนี้การเปลี่ยนแปลงที่เกิดขึ้นกับโฮเวอร์แทน:

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>

ขยายตัวอย่างข้อมูล

— StefanBob
แหล่งที่มา

1

หลังจากแปดปีที่ฉันเผชิญกับความท้าทายเดียวกันเมื่อพยายามใช้สไตล์ส่วนขยายเบราว์เซอร์ที่เพื่อเปลี่ยนบางสิ่งบางอย่างในเว็บไซต์ (ไม่ใช่ของฉัน) และครั้งนี้ฉันทำให้มันทำงานได้โดยดูซอร์สโค้ดโดยใช้ "ตรวจสอบองค์ประกอบ" และสร้างโค้ด 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>

ขยายตัวอย่างข้อมูล

คุณสามารถเรียกใช้รหัสด้านบนและคุณจะเห็นว่ามันใช้งานได้ (ทดสอบใน Chrome)

_{นี่เป็นสิ่งที่ฉันต้องการในสมัยก่อนเมื่อฉันถามคำถามนี้}

_{ฉันใช้บล็อกชุมชน / Myspaceคล้ายกันและสิ่งเดียวที่คุณมีเมื่อใส่สไตล์ของคุณคือเครื่องมือแก้ไข CSS และนั่นคือสาเหตุที่ฉันต้องการเลือกตามสไตล์}

ฉันพบคำตอบที่นี่:

— MokiTa
แหล่งที่มา

0

วิธีที่จะทำให้การทำงานนี้คือการเพิ่มความสูงบรรทัดในเนื้อหา CSS สิ่งนี้จะทำให้บล็อกถูกมองเห็นเหนือสิ่งที่ซ่อนอยู่ดังนั้นสิ่งนี้จะไม่ซ่อนข้อความที่เปลี่ยนแปลง

ตัวอย่างที่มีการใช้งานก่อน :

.pvw-title span {
  display: none;
}

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

— Tal Talmon
แหล่งที่มา

0

อย่างที่หลายคนบอกว่านี่เป็นแฮ็ค อย่างไรก็ตามฉันต้องการเพิ่มแฮ็คที่เป็นปัจจุบันมากขึ้นซึ่งใช้ประโยชน์จากflexboxและremเช่น

คุณไม่ต้องการวางตำแหน่งข้อความนี้ให้เปลี่ยนแปลงด้วยตนเองนั่นคือเหตุผลที่คุณต้องการใช้ประโยชน์จาก flexbox
คุณไม่ต้องการใช้paddingและ / หรือmarginใช้ข้อความอย่างชัดเจนpxซึ่งสำหรับขนาดหน้าจอที่แตกต่างกันในอุปกรณ์และเบราว์เซอร์ที่ต่างกันอาจให้ผลลัพธ์ที่แตกต่างกัน

ต่อไปนี้เป็นวิธีแก้ปัญหาโดยย่อflexboxทำให้แน่ใจว่าได้จัดวางตำแหน่งอย่างสมบูรณ์แบบและremเป็นทางเลือกที่เป็นมาตรฐานมากขึ้น (และอัตโนมัติ) สำหรับพิกเซล

CodeSandboxพร้อมโค้ดด้านล่างและแสดงผลในรูปแบบของสกรีนช็อตโปรดอ่าน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คุณสามารถขยายสิ่งนี้ไปยังอุปกรณ์มือถือได้อย่างง่ายดาย

— Daniel Danielecki
แหล่งที่มา