CSS text-overflow: จุดไข่ปลา; ไม่ทำงาน?

ฉันไม่รู้ว่าทำไม CSS ง่าย ๆ นี้ไม่ทำงาน ...

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

ควรตัดรอบ "การทดสอบ" ครั้งที่ 4

text-overflow:ellipsis; ใช้ได้เฉพาะเมื่อสิ่งต่อไปนี้เป็นจริง:

• ความกว้างขององค์ประกอบต้องถูก จำกัด ในpx(พิกเซล) ความกว้างเป็น%(เปอร์เซ็นต์) จะไม่ทำงาน
• องค์ประกอบจะต้องมีoverflow:hiddenและwhite-space:nowrapตั้งค่า

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

คุณสามารถแก้ไขได้โดยทำอย่างใดอย่างหนึ่งต่อไปนี้:

• ตั้งค่าองค์ประกอบเป็นdisplay:inline-blockหรือdisplay:block(อาจเป็นแบบดั้งเดิม แต่ขึ้นอยู่กับความต้องการเลย์เอาต์ของคุณ)
• ตั้งค่าองค์ประกอบหนึ่งในคอนเทนเนอร์เป็น display:blockให้องค์ประกอบที่คงที่หรือwidthmax-width
• ตั้งองค์ประกอบเป็น float:leftหรือfloat:right(อาจเป็นในอดีต แต่อีกครั้งควรมีผลเช่นเดียวกับที่เกี่ยวข้องกับจุดไข่ปลา)

ฉันขอแนะนำ display:inline-blockเนื่องจากจะมีผลกระทบต่อหลักประกันขั้นต่ำในการจัดวางของคุณ มันใช้งานได้ดีมากเหมือนกับdisplay:inlineที่ใช้ในปัจจุบันเท่าที่มีความเกี่ยวข้องกับเค้าโครง แต่คุณสามารถทดลองกับประเด็นอื่น ๆ ได้เช่นกัน ฉันพยายามให้ข้อมูลมากที่สุดเท่าที่จะเป็นไปได้เพื่อช่วยให้คุณเข้าใจว่าสิ่งเหล่านี้มีปฏิสัมพันธ์กันอย่างไร; ส่วนใหญ่ของการทำความเข้าใจ CSS นั้นเกี่ยวกับการทำความเข้าใจว่าสไตล์ต่างๆทำงานร่วมกันอย่างไร

นี่คือตัวอย่างรหัสของคุณพร้อมdisplay:inline-blockเพิ่มเพื่อแสดงว่าคุณอยู่ใกล้แค่ไหน

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

การอ้างอิงที่มีประโยชน์:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
• https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

คำตอบที่ยอมรับนั้นยอดเยี่ยม แต่คุณยังสามารถใช้ความกว้างและบรรลุ% text-overflow: ellipsisการแก้ปัญหาง่ายมาก:

display: inline-block; /* for em, a, span, etc (inline by default) */
text-overflow: ellipsis;
width: calc (80%); /* The trick is here! */

ดูเหมือนว่าเมื่อใดก็ตามที่คุณใช้calc, ค่าสุดท้ายมีการแสดงพิกเซลแน่นอนซึ่ง consequentially แปลง80%เพื่อสิ่งที่ต้องการ800pxหา1000pxภาชนะกว้าง ดังนั้นแทนการใช้การใช้งานwidth: [YOUR PERCENT]%width: calc([YOUR PERCENT]%)

ดังนั้นหากคุณมาถึงคำถามนี้เพราะคุณมีปัญหาในการพยายามให้จุดไข่ปลาทำงานในdisplay: flexคอนเทนเนอร์ลองเพิ่มmin-width: 0ไปยังคอนเทนเนอร์ที่อยู่นอกสุดที่ล้นออกมาแม้ว่าคุณจะตั้งค่าoverflow: hiddenไปแล้วและดูว่ามันทำงานอย่างไรสำหรับคุณ

รายละเอียดเพิ่มเติมและตัวอย่างการทำงานเกี่ยวกับเรื่องนี้codepenโดยAJ-อุปถัมภ์ เคล็ดลับทั้งหมดในกรณีของฉัน

นอกจากนี้ตรวจสอบให้แน่ใจว่าword-wrapตั้งค่าเป็นปกติสำหรับ IE10 และด้านล่าง

มาตรฐานที่อ้างถึงด้านล่างกำหนดลักษณะการทำงานของคุณสมบัตินี้ขึ้นอยู่กับการตั้งค่าของคุณสมบัติ "การตัดข้อความ" อย่างไรก็ตามการตั้งค่า wordWrap นั้นจะมีผลเสมอใน Windows Internet Explorer เพราะ Internet Explorer ไม่รองรับคุณสมบัติ "text-wrap"

ดังนั้นในกรณีของฉันword-wrapถูกตั้งค่าเป็นตัวแบ่งคำ (สืบทอดมาหรือโดยค่าเริ่มต้น) ทำให้text-overflowทำงานใน FF และ Chrome แต่ไม่ใช่ใน IE

ข้อมูล ms กับคุณสมบัติการห่อคำ

anchor, span... แท็กเป็นองค์ประกอบแบบอินไลน์โดยค่าเริ่มต้นในกรณีของwidthคุณสมบัติองค์ประกอบแบบอินไลน์ไม่ทำงาน ดังนั้นคุณต้องแปลงองค์ประกอบของคุณเป็นอย่างใดอย่างหนึ่งinline-blockหรือblock levelองค์ประกอบ

รวมสี่บรรทัดที่เขียนหลังข้อมูลเพื่อให้จุดไข่ปลาทำงานได้

.app a
{
 color: #fff;
 font: bold 15px/18px Arial;
 height: 18px;
 margin: 0 5px 0 5px;
 padding: 0;
 position: relative;
 text-align: center;
 text-decoration: none;
 width: 140px;

 /* 
 Note: The Below 4 Lines are necessary for ellipsis to work.
 */

 display: block;/* Change it as per your requirement. */
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

เพิ่มdisplay: block;หรือdisplay: inline-block;ของคุณ#User_Apps_Content .DLD_App a

การสาธิต

คุณเพิ่งเพิ่มหนึ่งบรรทัด css:

.app a {
   display: inline-block;
}

ในbootstrap 4คุณสามารถเพิ่ม.text-truncateคลาสเพื่อตัดทอนข้อความด้วยจุดไข่ปลา

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 250px;">
  The quick brown fox jumps over the lazy dog.
</span>

ต้องมี

  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

ต้องไม่มี

display: inline

ควรมี

position: sticky

คุณยังสามารถเพิ่ม float: left; ภายในคลาสนี้ #User_Apps_Content .DLD_App

ฉันต้องอธิบายวงรียาว ๆ (ใช้เพียงเลนเดียว) ในขณะที่ตอบสนองดังนั้นโซลูชันของฉันคือให้ตัดข้อความ (แทนwhite-space: nowrap) และแทนที่ความกว้างคงที่ฉันเพิ่มความสูงคงที่:

span {
  display: inline-block;
  line-height: 1rem;
  height: 1rem;
  overflow: hidden;
  // OPTIONAL LINES
  width: 75%;
  background: green;
  //  white-space: normal; default
}

<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quia quod reprehenderit saepe sit. Animi deleniti distinctio dolorum iste molestias reiciendis saepe. Ea eius ex, ipsam iusto laudantium natus obcaecati quas rem repellat temporibus! A alias at, atque deserunt dignissimos dolor earum, eligendi eveniet exercitationem natus non, odit sint sit tempore voluptate. Commodi culpa ex facere id minima nihil nulla omnis praesentium quasi quia quibusdam recusandae repellat sequi ullam, voluptates. Aliquam commodi debitis delectus magnam nulla, omnis sequi sint unde voluptas voluptatum. Adipisci aliquam deserunt dolor enim facilis libero, maxime molestias, nemo neque non nostrum placeat reprehenderit, rerum ullam vel? A atque autem consectetur cum, doloremque doloribus fugiat hic id iste nemo nesciunt officia quaerat quibusdam quidem quisquam similique sit tempora vel. Accusamus aspernatur at au
</span>

นี่คือรหัสที่อนุญาตให้:

overflow: hidden;
text-overflow: ellipsis;

ล้น: จำเป็นต้องซ่อน

ฉันประสบปัญหาเดียวกันและดูเหมือนว่าไม่มีวิธีการแก้ปัญหาข้างต้นสำหรับ Safari สำหรับเบราว์เซอร์ที่ไม่ใช่ซาฟารีสิ่งนี้ใช้ได้ดี:

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

สำหรับ Safari นี่คืออันที่เหมาะกับฉัน โปรดทราบว่าคิวรีสื่อเพื่อตรวจสอบว่าเบราว์เซอร์คือ Safari อาจเปลี่ยนแปลงตลอดเวลาดังนั้นเพียงแค่คนจรจัดกับคิวรีสื่อถ้ามันไม่ได้ผลสำหรับคุณ ด้วยline-clampคุณสมบัติก็ยังจะเป็นไปได้ที่จะมีหลายบรรทัดในเว็บที่มีจุดไข่ปลาดูที่นี่

// Media-query for Safari-only browser.
@media not all and (min-resolution: 0.001dpcm) {
  @media {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    white-space: normal;
  }
}

https://stackoverflow.com/a/53784508/5626747

ไม่สามารถแสดงความคิดเห็นเนื่องจากชื่อเสียงดังนั้นฉันจึงได้รับคำตอบอีก:

ในกรณีนี้คุณจะต้องลบdisplay: block;คุณสมบัติที่แนะนำโดยทั่วไปออกจากองค์ประกอบที่คุณตั้งไว้text-overflow: ellipsis;หรือจะถูกตัดออกโดยไม่ต้อง ... ในตอนท้าย

เขียนสิ่งเหล่านี้ในกฎ CSS ของคุณ

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;