ล้น: จุดที่ซ่อนอยู่ในตอนท้าย

205

สมมติว่าฉันมีสตริง " ฉันชอบก้นใหญ่และฉันนอนไม่หลับ " และฉันก็ตัดมันด้วยoverflow:hiddenดังนั้นมันจึงแสดงเป็นดังนี้:

ฉันชอบก้นใหญ่และฉันไม่สามารถ

ตัดข้อความ เป็นไปได้ไหมที่แสดงสิ่งนี้:

ฉันชอบก้นใหญ่และฉันไม่สามารถ ...

ใช้ CSS หรือไม่

html css

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

46

คำถามนี้เป็นเล่ห์เหลี่ยมในการส่งเสริมเพลงหรือไม่

— Cyril Gupta

12

@CyrilGupta ขออภัยในความล่าช้า ฉันต้องวิ่งไปที่ห้องน้ำ เพื่อตอบคำถามของคุณ ... ใช่

— Joe Phillips

1

ซ้ำกันเป็นไปได้ของฉันจะแสดงจุด ("... ") ในช่วงที่มีล้นที่ซ่อนอยู่ได้อย่างไร

— Termininja

282

คุณสามารถใช้text-overflow: ellipsis; ซึ่งเป็นไปตาม caniuseได้รับการสนับสนุนโดยเบราว์เซอร์ที่สำคัญทั้งหมด

นี่คือตัวอย่างของ jsbin

.cut-text { 
  text-overflow: ellipsis;
  overflow: hidden; 
  width: 160px; 
  height: 1.2em; 
  white-space: nowrap;
}

<div class="cut-text">
I like big buts and I can not lie.
</div>

ขยายตัวอย่างข้อมูล

— Joe Phillips
แหล่งที่มา

สิ่งนี้ดูเหมือนว่าจะทำงานใน Firefox 15.0.1: w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

— Jace

ใช่ดูเหมือนว่าจะทำงานในเวอร์ชันที่ใหม่กว่า เห็นได้ชัดว่าคำตอบนี้มีอายุไม่กี่ปีในตอนนี้

— Joe Phillips

Firefox เริ่มให้การสนับสนุนสิ่งนี้ในเวอร์ชัน 7 ซึ่งเปิดตัวในช่วงครึ่งหลังของปี 2011

— Richard Ev

1

ฉันสามารถใช้สามัญสำนึกของฉันเพื่อบอกว่าคำตอบนี้คือ "ถูกต้อง" ตามคะแนนและความคิดเห็น อย่างไรก็ตามฉันล้มเหลวที่จะเห็นในความเป็นจริงวิธีคำตอบนี้ "ถูกต้อง" ฉันใช้ทั้งสองอย่างoverflow: hidden;และtext-overflow: ellipsis;ในองค์ประกอบ (เช่นองค์ประกอบบล็อก) และไม่พบสิ่งใด...ในตอนท้าย (แน่นอนว่าฉันแน่ใจว่ามันล้นจริงๆ) ฉันยังพยายามนี้ได้โดยไม่ต้องoverflow: hidden;มีส่วนร่วมและยังมีองค์ประกอบภายในองค์ประกอบที่องค์ประกอบที่มีoverflow: hidden;และมีtext-overflow: ellipsis;ไม่ว่าวิธีการที่ฉันพยายามนี้เป็นความล้มเหลว ..

— VoidKing

2

ฉันคิดว่าฉันรู้ปัญหาแล้ว ฉันพยายาม จำกัด การล้นตามmax-heightดังนั้นฉันจึงไม่สามารถwhite-space:ตั้งค่าเป็นnowrap

— VoidKing

88

ตรวจสอบตัวอย่างข้อมูลต่อไปนี้สำหรับปัญหาของคุณ

div{
  width : 100px;
  overflow:hidden;
  display:inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div>
    The Alsos Mission was an Allied unit formed to investigate Axis scientific developments, especially nuclear, chemical and biological weapons, as part of the Manhattan Project during World War II. Colonel Boris Pash, a former Manhattan P
</div>

ขยายตัวอย่างข้อมูล

— อาร์จัน
แหล่งที่มา

4

up's สำหรับการเพิ่ม "white-space: nowrap;" ซึ่งอาจจำเป็นในบางกรณี

— leo

2

จะทำให้ข้อความแสดง 2 บรรทัดได้อย่างไร?

— Martian2049

1

@ Matian2040 คุณสามารถปรับโดยให้ความสูงคงที่และสไตล์ที่ซ่อนอยู่มากเกินไป

— Arjun

1

อ้อเข้าใจแล้ว. ฉันเหนื่อย. แต่ดูเหมือนว่าสองบรรทัดหมายความว่าจะไม่มี ... ในตอนท้าย?

— Martian2049

1

display: inline-block;เป็นองค์ประกอบที่ขาดหายไปสำหรับฉัน ขอบคุณ.

— เซท

18

ลองใช้ถ้าคุณต้องการ จำกัด บรรทัดไม่เกิน 3 และหลังจากสามบรรทัดจุดจะปรากฏขึ้น หากเราต้องการเพิ่มบรรทัดเพียงแค่เปลี่ยนค่า -webkit-line-clamp และให้ความกว้างสำหรับขนาด div

div {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}

— Nagendra Matala
แหล่งที่มา

ขอโทษด้วยฉันไม่แน่ใจว่าฉันลบคำของคุณเช่นนั้นได้อย่างไร!

— อเล็กซ์

ใช้งานได้ดีบน Chrome แต่โปรดทราบว่าสิ่งนี้จะไม่ทำงานบน Firefox

— Ken Bigler

ฉันจะทำสิ่งนี้กับเบราว์เซอร์อื่นพูด Firefox ได้อย่างไร แก้ไข: stackoverflow.com/questions/33058004/…

— user3187724

17

หวังว่าจะเป็นประโยชน์สำหรับคุณ:

.text-with-dots {
    display: block;
    max-width: 98%;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

<div class='text-with-dots'>Some texts here Some texts here Some texts here Some texts here Some texts here Some texts here </div>

ขยายตัวอย่างข้อมูล

— วูฟาน
แหล่งที่มา

15

ใช่ผ่านtext-overflowคุณสมบัติใน CSS 3 Caveat: ยังไม่รองรับในเบราว์เซอร์

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

3

การสนับสนุนเบราว์เซอร์นั้นค่อนข้างดีในตอนนี้ในเดือนกุมภาพันธ์ 2555 ดูcaniuse.com/#search=text-overflow

— Simon East

1

คุณเป็นเหตุผลที่ทำให้คำถามนี้ปรากฏขึ้นในอีกสามปีต่อมา

— Mr Lister

8

ใน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: 190px;">
  I like big butts and I cannot lie
</span>

ขยายตัวอย่างข้อมูล

— เพียวหลิว
แหล่งที่มา

6

<style>
    .dots
    {
        display: inline-block;
        width: 325px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }

    .dot
    {
        display: inline-block;
        width: 185px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }
</style>

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

3

โซลูชันส่วนใหญ่ใช้ความกว้างคงที่ที่นี่ แต่บางครั้งมันอาจผิดด้วยเหตุผลบางอย่าง

ตัวอย่าง: ฉันมีตารางที่มีหลายคอลัมน์ ส่วนใหญ่แคบ (ความกว้างคงที่) แต่คอลัมน์หลักควรกว้างที่สุดเท่าที่จะเป็นไปได้ (ขึ้นอยู่กับขนาดหน้าจอ)

HTML:

<table style="width: 100%">
  <tr>
    <td style="width: 60px;">narrow</td>
    <td>
      <span class="cutwrap" data-cutwrap="dynamic column can have really long text which can be wrapped on two rows, but we just need not wrapped texts using as much space as possible">
        dynamic column can have really long text which can be wrapped on two rows
        but we just need not wrapped texts using as much space as possible
      </span>
    </td>
  </tr>
</table>

CSS:

.cutwrap {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 18px;
  white-space: normal;
  color: transparent !important;
}
.cutwrap::selection {
  color: transparent !important;
}
.cutwrap:before {
  content: attr(data-cutwrap);
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}
/* different styles for links */
a.cutwrap:before {
  text-decoration: underline;
  color: #05c;
}

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

3

<!DOCTYPE html>
<html>
<head>
<style>
.cardDetaileclips{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* after 3 line show ... */
    -webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div style="width:100px;">
  <div class="cardDetaileclips">
    My Name is Manoj and pleasure to help you.
  </div>
</div> 
</body>
</html>

— Manoj Patel
แหล่งที่มา

-1

ซ่อนข้อความในการโหลดและแสดงบนโฮเวอร์

<span class="hide-text"> How to hide text by dots and show text on hover</span>

.hide-text {
    width: 70px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
  }

  span:hover {
     white-space: unset;
     text-overflow: unset;
  }

— Rohit Parte
แหล่งที่มา