ฉันจะลบคำแนะนำเครื่องมือเริ่มต้นของเบราว์เซอร์ที่แสดงเมื่อวางเมาส์เหนือข้อความที่ถูกตัดทอนในลิงก์ได้อย่างไร
ข้อความถูกตัดทอนเนื่องจากกฎจุดไข่ปลา css :
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
เมื่อฉันใช้กฎเหล่านี้กับ div ที่มีความกว้างคงที่ ฉันจะได้รับคำแนะนำเครื่องมือ html (เฉพาะใน Safari ไม่ใช่ใน Firefox หรือ Chrome)
นี่คือ jsfiddle
ฉันพยายามเพิ่ม JS preventDefault และเพิ่มแอตทริบิวต์ title ที่ว่างเปล่า แต่ไม่มีสิ่งใดที่ใช้งานได้
ความสามารถในการแสดงคำแนะนำเครื่องมือสำหรับองค์ประกอบที่มีข้อความล้นซึ่งถูกตัดออกด้วยจุดไข่ปลาที่ไม่มี title ที่ไม่ว่างเปล่านั้นเป็นส่วนหนึ่งของแกนหลักของ WebKit แต่จะถูกปิดไว้ตามค่าเริ่มต้น มีเพียง Safari เท่านั้นที่จะแทนที่สิ่งนั้นและเปิดใช้งานพฤติกรรมนี้ ไม่มีทางที่จะปิดสิ่งนั้นจากรหัสแอปพลิเคชันของคุณ
วิธีแก้ปัญหาเบื้องต้น ให้เพิ่มองค์ประกอบบล็อกว่างภายในองค์ประกอบที่มีการโอเวอร์โฟลว์ซ่อนอยู่ด้วย text-overflow: ellipsis สิ่งนี้สามารถทำได้จริงตามที่คำตอบของ @bas แสดงไว้แล้วหรือโดยการสร้างองค์ประกอบหลอกด้วย CSS:
&::after {
content: '';
display: block;
}
(ใช้ไวยากรณ์ SCSS) หากคุณใช้ Sass และสร้างมิกซ์อินที่ห่อหุ้มการซ่อนข้อความที่ล้นด้วยจุดไข่ปลา นี่อาจเป็นส่วนเสริมที่ดีโดยไม่จำเป็นต้องมาร์กอัป HTML เพิ่มเติมใดๆ
::after แทน ::before ไม่เช่นนั้น overflow & text-overflow ของคอนเทนเนอร์จะไม่ทำงานบน IE และ Edge
- person pallxk; 28.07.2017
::after ควรใช้เพื่อให้ใช้ได้กับทุกเบราว์เซอร์
- person Allan Jebaraj; 25.09.2020
ฉันยังไม่ได้รับอนุญาตให้ใช้ pointer-events:none เพราะมันคือลิงก์ ฉันได้แรงบันดาลใจจากคำตอบของผู้ใช้ 1271033 ตัวอย่างไม่ได้ผลสำหรับฉัน แต่การเพิ่ม div ว่างก่อนที่ข้อความใน div ที่ถูกตัดทอนจะได้ผลสำหรับฉัน
ตัวอย่าง:
<div style="text-overflow: ellipsis;white-space: nowrap; overflow: hidden;width:50px;">
<div></div>
Test test test
</div>
http://schoonc.blogspot.ru/2014/11/safari-text-overflow-ellipsis.html ? บางทีมันอาจจะเหมาะกับคุณ ตัวอย่าง:
<div class="text-container">longlonglonglongname</div>
.text-container {
overflow: hidden;
text-overflow: ellipsis;
...
&:before {
content: '';
display: block;
}
<div class="text-container" data-name="longlonglonglongname"></div>
.text-container {
overflow: hidden;
text-overflow: ellipsis;
...
&:before {
content: attr(data-name);
}
คุณสามารถปิดใช้งานคำแนะนำเครื่องมือใน Safari ได้โดยตั้งค่าเหตุการณ์ตัวชี้: ไม่มี; ใน CSS โปรดทราบว่าการดำเนินการนี้จะปิดใช้งานกิจกรรมตัวชี้ทั้งหมด ดังนั้นหากเป็นลิงก์ ลิงก์ก็จะปิดใช้งานเช่นกัน
เพิ่ม css ในรหัสของคุณ
pointer-events: none;
แม้แต่คุณสามารถสร้าง CSS ใหม่สำหรับมันและนำไปใช้ได้ทุกที่ที่จำเป็น
คุณสามารถทำได้ด้วยวิธีนี้:
<div id="fix" title=""><a href="http://www.google.com"><span style="pointer-events:none;">Lorem ipsum dolor sit amet</span></a></div>
ลองดูสิ
https://jsfiddle.net/poojagayake/tx06vq09/1/
