{ Hide_text } รายงานสรุปการซ่อนข้อความ CSS

{ Hide_text } รายงานสรุปการซ่อนข้อความ CSS

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

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

รายการวิธีสาธิต

1. โดยไม่ต้องจอง: จอแสดงผล: ไม่มี

ข้อมูลโค้ด:

(x)HTML

ฉันเป็นข้อความซอสถั่วเหลือง

ซีเอสเอส

/* การซ่อนความรุนแรง */
.hide_display{จอแสดงผล:ไม่มี;}

ความเข้ากันได้:

ข้อได้เปรียบ:

• สะดวกและรวดเร็ว
• เข้ากันได้ดี

ข้อบกพร่อง:

• โปรแกรมอ่านหน้าจอไม่สามารถอ่านได้
• ไฮเปอร์ลิงก์ใช้ไม่ได้
• ข้อความแสดงแทนรูปภาพต้องใช้พื้นหลังของป้ายกำกับอื่นๆ
• ส่งผลกระทบต่อการจัดอันดับการค้นหา
• การใช้งานอย่างกว้างขวางถือได้ว่าเป็นการโกง SEO ได้ง่าย

2. ตัวเลือกประนีประนอม: ล้น: ซ่อน / ตำแหน่ง: สัมบูรณ์ / การมองเห็น: ซ่อนเร้น

ข้อมูลโค้ด:

(x)HTML

ฉันเป็นข้อความเกี่ยวกับซีอิ๊วอันดับ 1

ฉันคือข้อความซีอิ๊วอันดับ 2

ซีเอสเอส

/* ซ่อนองค์ประกอบและแยกออกจากการไหลของข้อความ เพื่อให้องค์ประกอบนั้นไม่ส่งผลกระทบต่อองค์ประกอบอื่น ๆ */
.hide_overflow{
ความสูง:0px;
ล้น: ซ่อน;
display:block;/* จำเป็นต้องมีองค์ประกอบแบบอินไลน์*/
float:left; /* ออกจากการไหลของเอกสารหรือตำแหน่ง: แน่นอน;*/
-
/* วางตำแหน่งนอกช่วงที่มองเห็นได้ อยู่นอกการไหลของข้อความ เพื่อให้องค์ประกอบไม่ส่งผลกระทบต่อองค์ประกอบอื่นๆ*/
.hide_position{
ตำแหน่ง:แน่นอน;
ซ้าย:-32767px;
-
/* หลักการเหมือนกับ .hide_position*/
.hide_การมองเห็น{
การมองเห็น: ซ่อน;
ตำแหน่ง:สัมบูรณ์; /* ออกจากการไหลของเอกสาร*/
ขอบซ้าย:-32767px;
-