ฉันจะป้องกันไม่ให้ข้อความในบล็อก div ล้นออกมาได้หรือไม่

ฉันจะป้องกันไม่ให้ข้อความในบล็อก div ล้นออกมาได้หรือไม่

หากคุณต้องการให้ข้อความที่ล้นใน div ขึ้นบรรทัดใหม่โดยอัตโนมัติแทนที่จะซ่อนหรือสร้างแถบเลื่อนให้ใช้ไฟล์

word-wrap: break-word

คุณสมบัติ

คุณสามารถลอง:

<div id="myDiv">
    stuff 
</div>

#myDiv {
    overflow:hidden;
}

ตรวจสอบเอกสารสำหรับคุณสมบัติล้นสำหรับข้อมูลเพิ่มเติม

คุณสามารถใช้คุณสมบัติ CSS text-overflow เพื่อตัดข้อความยาว ๆ

<div id="greetings">
  Hello universe!
</div>

#greetings
{
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; // This is where the magic happens
}

อ้างอิง: http://makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts

คุณสามารถควบคุมได้ด้วย CSS มีตัวเลือกไม่กี่ตัว:

• ซ่อน -> ข้อความทั้งหมดที่ล้นจะถูกซ่อน
• มองเห็นได้ -> ปล่อยให้ข้อความล้นจนมองเห็นได้
• เลื่อน -> ใส่แถบเลื่อนหากข้อความล้น

หวังว่าจะช่วยได้

เพียงใช้สิ่งนี้:

white-space: pre-wrap;      /* CSS3 */   
white-space: -moz-pre-wrap; /* Firefox */    
white-space: -pre-wrap;     /* Opera <7 */   
white-space: -o-pre-wrap;   /* Opera 7 */    
word-wrap: break-word;      /* IE */

มีคุณสมบัติ css อื่น:

white-space : normal;

คุณสมบัติพื้นที่สีขาวควบคุมวิธีจัดการข้อความบนองค์ประกอบที่นำไปใช้

div {

  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 

}

ลองเพิ่มคลาสนี้เพื่อแก้ไขปัญหา:

.ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

อธิบายเพิ่มเติมในลิงค์นี้http://css-tricks.com/almanac/properties/t/text-overflow/

overflow: scroll? หรืออัตโนมัติ. ในแอตทริบิวต์สไตล์

ฉันเดาว่าคุณควรเริ่มต้นด้วยพื้นฐานจาก w3

https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

div {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

หาก div ของคุณมีความสูงที่กำหนดไว้ใน css ซึ่งจะทำให้มันล้นออกมานอก div

คุณสามารถกำหนดความสูงขั้นต่ำของ div ได้ถ้าคุณต้องการให้ div มีความสูงต่ำสุดตลอดเวลา

ความสูงต่ำสุดจะใช้ไม่ได้ใน IE6 แต่ถ้าคุณมีสไตล์ชีตเฉพาะของ IE6 คุณสามารถกำหนดความสูงปกติสำหรับ IE6 ได้ ความสูงเปลี่ยนแปลงใน IE6 ตามเนื้อหาภายใน

คุณสามารถตั้งค่า min-width ใน css ได้เช่น:

.someClass{min-width: 980px;}

มันจะไม่แตกอย่างไรก็ตามคุณยังคงมีแถบเลื่อนให้จัดการ

คำแนะนำในการตรวจสอบว่าส่วนใดของ CSS ของคุณเป็นสาเหตุของปัญหา:

1) ตั้งค่าองค์ประกอบstyle="height:auto;"ทั้งหมด<div>แล้วลองใหม่อีกครั้ง

2) ตั้งค่าองค์ประกอบstyle="border: 3px solid red;"ทั้งหมด<div>เพื่อดูว่า<div>กล่องของคุณใช้พื้นที่กว้างแค่ไหน

3) นำheight:#px;คุณสมบัติcss ออกจาก CSS ของคุณและเริ่มต้นใหม่

ตัวอย่างเช่น:

<div id="I" style="height:auto;border: 3px solid red;">I
    <div id="A" style="height:auto;border: 3px solid purple;">A
        <div id="1A" style="height:auto;border: 3px solid green;">1A
        </div>
        <div id="2A" style="height:auto;border: 3px solid green;">2A
        </div>
    </div>
    <div id="B" style="height:auto;border: 3px solid purple;">B
        <div id="1B" style="height:auto;border: 3px solid green;">1B
        </div>
        <div id="2B" style="height:auto;border: 3px solid green;">2B
        </div>
    </div>
</div>

.NonOverflow {
    width: 200px; /* Need the width for this to work */
    overflow: hidden;
}

<div class="NonOverflow">
    Long Text
</div>

!! โครตยากลุย !! ขึ้นอยู่กับรหัสรอบข้างและความละเอียดของหน้าจอซึ่งอาจนำไปสู่พฤติกรรมที่แตกต่าง / ไม่ต้องการ

หากส่วนเกินที่ซ่อนอยู่ไม่อยู่ในคำถามและจำเป็นต้องใช้ยัติภังค์ที่ถูกต้องคุณสามารถใช้เอนทิตี HTML ยัติภังค์แบบอ่อนที่คุณต้องการให้คำ / ข้อความแตก ด้วยวิธีนี้คุณจะสามารถกำหนดจุดแตกหักได้ด้วยตนเอง

­

ยัติภังค์จะปรากฏก็ต่อเมื่อคำต้องการแตกเพื่อไม่ให้ล้นคอนเทนเนอร์โดยรอบ

ตัวอย่าง:

<div class="container">
  foo&shy;bar
</div>

ผลลัพธ์ถ้าคอนเทนเนอร์กว้างพอและข้อความจะไม่ล้นคอนเทนเนอร์:

foobar

ผลลัพธ์ถ้าคอนเทนเนอร์มีขนาดเล็กและข้อความจะล้นคอนเทนเนอร์จริง:

foo-
bar

.container{
  background-color: green;
  max-width: 30px;
}

Example 1 - container to small => text overflows container:

<div class="container">
  foobar
</div>

Example 2 - using soft hyphen => text breaks at predetermined break point:

<div class="container">
  foo&shy;bar
</div>

Example 3 - using soft hyphen => text still overflowing because the text before the soft hyphen is to long:

<div class="container">
  foobar&shy;foo
</div>

ข้อมูลเพิ่มเติม: https://en.wikipedia.org/wiki/Soft_hyphen