ใช้ CSS เพื่อแทรกข้อความ

207

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

ตอนนี้ฉันต้องการจะใช้มันเพื่อแทรกข้อความตามที่แสดงด้านล่าง:

<span class="OwnerJoe">reconcile all entries</span>

ซึ่งฉันหวังว่าฉันจะได้แสดงเป็น:

ภารกิจของ Joe: กระทบยอดรายการทั้งหมด

นั่นคือโดยอาศัยอำนาจของการเป็น "เจ้าของโจ" ชั้นเรียนฉันต้องการข้อความJoe's Task:ที่จะแสดง

ฉันสามารถทำได้ด้วยรหัสเช่น:

<span class="OwnerJoe">Joe's Task:</span> reconcile all entries.

แต่ดูเหมือนว่าซ้ำซ้อนอย่างมากทั้งระบุคลาสและข้อความ

เป็นไปได้ไหมที่จะทำสิ่งที่ฉันกำลังมองหา?

แก้ไข ไอเดียหนึ่งคือพยายามตั้งค่าเป็น ListItem <li>โดยที่ "bullet" คือข้อความ "Joe's Task" ฉันเห็นตัวอย่างของวิธีการตั้งค่ารูปแบบสัญลักษณ์แสดงหัวข้อย่อยต่าง ๆ และแม้แต่รูปสำหรับสัญลักษณ์แสดงหัวข้อย่อย เป็นไปได้หรือไม่ที่จะใช้ข้อความเล็ก ๆ สำหรับ list-bullet?

html css

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

1

แนวคิด <li> ไม่ใช่แนวปฏิบัติที่ดี หากคุณต้องการสิ่งนี้จริงๆให้มองหาภาษาเทมเพลตแทน

— Gary

1

เสียงเหมือนการใช้ CSS3: ก่อนหรือ: หลังจากองค์ประกอบแบบหลอกคุณจะต้องย้ายความซ้ำซ้อนไปยังที่ดิน CSS (เพราะคุณจะต้องเพิ่มคำสั่ง CSS สำหรับ OwnerJoe, OwnerJane และอื่น ๆ )

— Matt Beckman

2

@ Matt Beckman: ไม่เป็นไรสำหรับฉัน ฉันสามารถกำหนดบล็อก CSS สำหรับผู้ใช้แต่ละคนได้อย่างง่ายดาย ทำซ้ำมันซ้ำแล้วซ้ำอีกใน HTML ดูเหมือนมากเกินไปในกรณีของฉัน

— abelenky

1

ฉันรู้สึกว่าการใช้สิ่งนี้ในทางปฏิบัติมากขึ้นสำหรับผู้ชมที่กว้างขึ้นจะต้องการ label.required:before {content: "* ";}เพิ่มเครื่องหมายดอกจันหน้าฟิลด์ที่ต้องการบางที

— Patrick

317

มันเป็น แต่ต้องใช้เบราว์เซอร์ที่สามารถใช้ CSS2 ได้ (เบราว์เซอร์หลัก ๆ ทั้งหมด IE8 +)

.OwnerJoe:before {
  content: "Joe's Task:";
}

แต่ฉันอยากจะแนะนำให้ใช้ Javascript สำหรับสิ่งนี้ ด้วย jQuery:

$('.OwnerJoe').each(function() {
  $(this).before($('<span>').text("Joe's Task: "));
});

— Marcel Jackwerth
แหล่งที่มา

4

ควรเว้นวรรคหลังลำไส้ใหญ่

— ระบบหยุดชั่วคราว

7

การทดสอบเริ่มต้นระบุว่าทรัพย์สินเนื้อหาทำงานได้ดี ขอแสดงความยินดีกับการหาคำตอบเมื่อทุกคนบอกว่าไม่สามารถทำได้ :)

— abelenky

8

เพื่อครอบคลุม IE ที่เก่ากว่าคุณสามารถรวมcode.google.com/p/ie7-js แบบมีเงื่อนไขซึ่งจะทำให้ CSS ของคุณยังคงเหมือนเดิมสำหรับเบราว์เซอร์ทั้งหมด มันเป็นทางเลือกของ jQuery ที่ใกล้เคียงกับมาตรฐานมากขึ้น

— ระบบหยุดชั่วคราว

15

ทำไมคุณอยากแนะนำให้ใช้ Javascript

— Rikki

ที่น่าสนใจ: ดูเหมือนว่าจะทำงานกับหนึ่งหรือสองทวิภาคเช่น.OwnerJoe:beforeและ.OwnerJoe::before

— นายเคนเนดี

40

คำตอบที่ใช้ jQuery ที่ทุกคนดูเหมือนจะมีข้อบกพร่องที่สำคัญซึ่งมันไม่สามารถปรับขนาดได้ (อย่างน้อยมันก็เขียน) ฉันคิดว่า Martin Hansen มีความคิดที่ถูกต้องซึ่งก็คือการใช้data-*คุณลักษณะHTML5 และคุณสามารถใช้เครื่องหมายวรรคตอนได้อย่างถูกต้อง:

HTML:

<div class="task" data-task-owner="Joe">mop kitchen</div>
<div class="task" data-task-owner="Charles" data-apos="1">vacuum hallway</div>

CSS:

div.task:before { content: attr(data-task-owner)"'s task - " ; }
div.task[data-apos]:before { content: attr(data-task-owner)"' task - " ; }

เอาท์พุท:

Joe's task - mop kitchen
Charles' task - vacuum hallway

— เจฟฟ์
แหล่งที่มา

19

ผลข้างเคียงที่น่าสนใจในการใช้เนื้อหา css ซึ่งแตกต่างจาก jQuery คือข้อความที่ระบุโดยแอ็ตทริบิวต์เนื้อหาไม่สามารถเลือกได้ซึ่งอาจเป็นที่ต้องการหรืออาจจะไม่เป็นที่ต้องการ ....

— Jeff

หากข้อความนั้นเป็นส่วนหนึ่งของเค้าโครงหน้ากระดาษและไม่ใช่ส่วนหนึ่งของเนื้อหาบางที CSS นั้นเหมาะกับมัน ตัวอย่างเช่นหากคุณต้องการให้หน้าของคุณมุ่งหน้าไปทั่วทุกหน้าให้เป็นคำว่า "Hello World" เป็นสีม่วงบนพื้นหลังสีเขียวมะนาวมันจะสมเหตุสมผล สิ่งที่ต้องทำเพื่อเปลี่ยนส่วนหัวของหน้าของคุณคือแก้ไขไฟล์ CSS ไฟล์เดียว หากคุณมีข้อความเป็น HTML ก็จะทำการแก้ไขทุกหน้าในเว็บไซต์ของคุณและอาจจะเปลี่ยนเป็น webapps ของคุณ

— 58

28

ตรวจสอบฟังก์ชั่น attr () ของแอตทริบิวต์เนื้อหา CSS มันส่งออกแอตทริบิวต์ที่กำหนดขององค์ประกอบเป็นโหนดข้อความ ใช้มันอย่างนั้น:

<div class="Owner Joe" />

div:before {
  content: attr(class);
}

หรือแม้กระทั่งกับแอตทริบิวต์ข้อมูลที่กำหนดเอง HTML5 ใหม่:

<div data-employeename="Owner Joe" />

div:before {
  content: attr(data-employeename);
}

— Martin Hansen
แหล่งที่มา

2

นั่นเป็นแนวคิดที่ดีกว่า - ฉันเกลียดความคิดในการสร้างคลาส css เพื่อแสดงเนื้อหา มันอาจท้ายสร้าง css แบบไดนามิกตามแบบสอบถาม sql div[data-employeename]:beforeผมจะเข้ามาแทนที่ตัวเลือกโดย

— Johnny5

6

รหัสมันเช่นนี้

.OwnerJoe {
  //other things here
  &:before{
    content: "Joe's Task: ";
  }
}

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

18

นี่ไม่ใช่ CSS ที่ถูกต้อง แต่เป็นไวยากรณ์ Sass

— Asfand Qazi