ข้อความมากเกินไป: จุดไข่ปลาไม่ทำงาน


264

นี่คือสิ่งที่ฉันพยายาม (ดูที่นี่ ):

body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
}

โดยพื้นฐานแล้วฉันต้องการให้ระยะห่างลดลงด้วยจุดไข่ปลาเมื่อหน้าต่างมีขนาดเล็ก ฉันทำอะไรผิด?


6
ข้อกำหนดสำหรับจุดไข่ปลาที่จะทำงาน: stackoverflow.com/a/33061059/3597276
Michael Benjamin

ปัญหาที่ฉันมีเมื่อฉันคิดว่ามันไม่ทำงานคือฉันไม่ได้ตั้งความกว้างไว้นานพอ (10px) ดังนั้นฉันจึงตัดวงรีออกไป!
ร็อด

คำตอบ:


459

คุณจำเป็นต้องมี CSS overflow, width(หรือmax-width) และdisplaywhite-space

http://jsfiddle.net/HerrSerker/kaJ3L/1/

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

ภาคผนวก หากคุณต้องการภาพรวมของเทคนิคในการทำ Line clamping (Multiline Overflow Ellipses) ให้ดูที่หน้า CSS-Tricks นี้: https://css-tricks.com/line-clampin/

ภาคผนวก 2 (พฤษภาคม 2019)
ตามที่ลิงก์นี้อ้างว่า Firefox 68 จะสนับสนุน-webkit-line-clamp(!)


12
พื้นที่สีขาวเป็นสิ่งที่ฉันขาดหายไป ขอบคุณ
nebulousGirl

65
มันแย่มากที่คุณต้องการwhite-space: nowrap;ทรัพย์สิน ตอนนี้คุณสามารถทำให้ข้อความหนึ่งบรรทัดลงท้ายด้วย ... แทนที่จะเป็นข้อความบล็อก
Sven van Zoelen

3
วันนี้เบราว์เซอร์หลักทั้งหมดสนับสนุนจุดไข่ปลา: caniuse.com/#feat=text-overflow
kazy

1
@basZero Multiline Ellipsis ไม่รองรับ CSS เพียงอย่างเดียว คุณต้องใช้มาตรการอื่น ๆ
yunzen

1
คุณต้องระบุความกว้างเพื่อให้คอนเทนเนอร์ถูกผูกไว้คุณต้องตั้งค่าโอเวอร์โฟลว์: ซ่อนเพื่อให้เบราว์เซอร์จะซ่อนข้อความที่รันเกินจากนั้นตั้งค่า text-โอเวอร์โฟลว์: จุดไข่ปลาเพื่อแนะนำเบราว์เซอร์
Michael Angstadt

46

ตรวจสอบให้แน่ใจว่าคุณมีองค์ประกอบบล็อกขนาดสูงสุดและตั้งค่าเป็นล้น (ทดสอบใน IE9 และ FF 7)

http://jsfiddle.net/uh9zD/

div {
    border: solid 2px blue;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50px;
}

5
ดูเหมือนว่า white-space: คุณสมบัติ nowrap โดยทั่วไปอาจจำเป็นเช่นกันสำหรับทุกสิ่งที่มีช่องว่าง
Kzqai

ซ้ำซ้อนกับความคิดเห็นด้านบน
nebulousGirl

@nebulousGirl: จริงๆแล้วความคิดเห็นของ Kzqai นั้นเร็วกว่าที่โพสต์ในความคิดเห็นของ HerrSerker
lepe

มีการเล่นโวหารใน IE - IE ไม่ได้ห่อคำที่สอง (ทดสอบใน IE 11) ... ไปคิด ทำงานในเบราว์เซอร์อื่น ๆ ตามที่คาดไว้ (รวมถึง Opera 12 ที่ดีเก่า)
Nux

1
@Nux นี่ใช้งานไม่ได้ตามที่คาดไว้ในเบราว์เซอร์ MS Edge
yunzen

21

สำหรับการใช้หลายบรรทัดใน Chrome:

display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // max nb lines to show
-webkit-box-orient: vertical;

แรงบันดาลใจจาก youtube ;-)


นี่เป็นทางออกที่น่าสนใจมาก มันใช้-webkit-*คุณสมบัติ แต่ได้รับการสนับสนุนในเบราว์เซอร์หลักทั้งหมด ข้อมูลเพิ่มเติมสามารถดูได้ที่นี่: css-tricks.com/almanac/properties/l/line-clamp
dkniffin

5

ฉันมีปัญหากับจุดไข่ปลาใต้โครเมียม เปิดใช้พื้นที่สีขาว: ตอนนี้ดูเหมือนว่าจะซ่อมมันแล้ว

max-width: 95px;
max-height: 20px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: solid 1px black;
font-size: 12pt;
text-align: right;
white-space: nowrap;

4
word-wrap: break-word;

สิ่งนี้และเพียงแค่นี้ได้งานสำหรับฉันสำหรับ

<pre> </pre> 

แท็ก

ทุกอย่างอื่นล้มเหลวในการทำจุดไข่ปลา ....


3

เพียงหูฟังสำหรับทุกคนที่อาจสะดุดในสิ่งนี้ ... h2 ของฉันกำลังสืบทอด

text-rendering: optimizelegibility; 
//Changed to text-rendering: none; for fix

ซึ่งไม่อนุญาตให้จุดไข่ปลา เห็นได้ชัดว่านี่เป็น finickey ใช่มั้ย


2

เพิ่มรหัสด้านล่างนี้สำหรับที่คุณชอบ

ตัวอย่าง

p{
   display: block; /* Fallback for non-webkit */
   display: -webkit-box;
   max-width: 400px;
   margin: 0 auto;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 }

2

สำหรับหลายบรรทัด

ในโครเมี่ยมคุณสามารถใช้ CSS นี้หากคุณต้องการใช้จุดไข่ปลาในหลายบรรทัด

คุณยังสามารถเพิ่มความกว้างใน css ของคุณเพื่อระบุองค์ประกอบของความกว้างที่แน่นอน:

.multi-line-ellipsis {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
<p class="multi-line-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>


1

คุณอาจลองใช้จุดไข่ปลาโดยเพิ่มสิ่งต่อไปนี้ใน CSS:

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

แต่ดูเหมือนว่ารหัสนี้ใช้กับการตัดแต่งแบบบรรทัดเดียว วิธีเพิ่มเติมในการตัดแต่งข้อความและแสดงจุดไข่ปลาสามารถพบได้ในเว็บไซต์นี้: http://blog.sanuker.com/?p=631


0

เพิ่มบรรทัดต่อไปนี้ใน CSS เพื่อให้จุดไข่ปลาทำงาน

 p {
     display: block; // change it as per your requirement
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

0

สำหรับพวกเราที่ไม่ต้องการใช้ความกว้างคงที่มันก็ใช้งานdisplay: inline-gridได้เช่นกัน ดังนั้นพร้อมกับคุณสมบัติที่จำเป็นคุณเพียงแค่เพิ่มdisplay

span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-grid;
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.