วิธีตัดคำข้อความใน HTML?

ข้อความแบบaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaที่เกินความกว้างของ a div(พูด200px) จะถูกห่อได้อย่างไร?

ฉันเปิดให้โซลูชันชนิดใดก็ได้เช่น CSS, jQuery เป็นต้น

ลองสิ่งนี้:

div {
    width: 200px;
    word-wrap: break-word;
}

บน bootstrap 3 ตรวจสอบให้แน่ใจว่า white-space ไม่ได้ถูกตั้งค่าเป็น 'nowrap'

div {
  width: 200px;
  word-break: break-all;
  white-space: normal;
}

คุณสามารถใช้ยัติภังค์แบบนิ่มดังนี้:

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

สิ่งนี้จะปรากฏเป็น

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

ถ้ากล่องที่บรรจุมีขนาดไม่ใหญ่พอหรือเป็น

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

ถ้ามันเป็น.

   div {
    // set a width
    word-wrap: break-word
}

'การword-wrapแก้ปัญหา' ทำงานเฉพาะใน IE CSS3และเบราว์เซอร์ที่สนับสนุน

โซลูชันเบราว์เซอร์ข้ามที่ดีที่สุดคือการใช้ภาษาฝั่งเซิร์ฟเวอร์ของคุณ (php หรืออะไรก็ตาม) เพื่อค้นหาสตริงที่ยาวและวางไว้ในช่วงเวลาปกติเอนทิตี html เอนทิตี​ นี้จะแบ่งคำที่ยาวออกไปและทำงานบนเบราว์เซอร์ทั้งหมด

เช่น

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

อันเดียวที่ใช้ได้กับ IE, Firefox, chrome, Safari และ opera หากไม่มีช่องว่างในคำ (เช่น URL ที่ยาว) คือ:

div{
    width: 200px;  
    word-break: break-all;
}

ฉันพบสิ่งนี้เพื่อพิสูจน์กระสุน

สิ่งนี้ใช้ได้สำหรับฉัน

word-wrap: normal;
word-break: break-all;
white-space: normal;
display: block;
height: auto;
margin: 3px auto;
line-height: 1.4;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

ตัวเลือกอื่นก็ใช้:

div
{
   white-space: pre-line;
}

สิ่งนี้จะกำหนดองค์ประกอบ div ทั้งหมดของคุณในเบราว์เซอร์ทั้งหมดที่รองรับCSS1 (ซึ่งเป็นเบราว์เซอร์ทั่วไปเกือบทั้งหมดเท่า IE 8)

เบราว์เซอร์ข้าม

.wrap
{
    white-space: pre-wrap; /* css-3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

เพิ่ม CSS นี้ในย่อหน้า

style="width:420px; 
min-height:15px; 
height:auto!important; 
color:#666; padding: 1%; 
font-size: 14px; 
font-weight: normal;
word-wrap: break-word; 
text-align: left" 

ตัวอย่างจากCSS Trick :

div {
    -ms-word-break: break-all;

    /* Be VERY careful with this, breaks normal words wh_erever */
    word-break: break-all;

    /* Non standard for webkit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

ตัวอย่างเพิ่มเติมที่นี่

โซลูชันฝั่งเซิร์ฟเวอร์ที่เหมาะกับฉันคือ: $message = wordwrap($message, 50, "<br>", true);ที่ไหน$messageคือตัวแปรสตริงที่มีคำ / ตัวอักษรที่จะแตก 50 คือความยาวสูงสุดของเซ็กเมนต์ใด ๆ ที่กำหนดและ"<br>"เป็นข้อความที่คุณต้องการแทรกทุกตัวอักษร (50)

ลองสิ่งนี้

div{
  display: block;
  display: -webkit-box;
  height: 20px;
  margin: 3px auto;
  font-size: 14px;
  line-height: 1.4;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

คุณสมบัติ text-overflow: จุดไข่ปลาเพิ่ม ... และที่ยึดบรรทัดแสดงจำนวนบรรทัด

ในเนื้อหา HTML ลอง:

<table>
    <tr>
        <td>
            <div style="word-wrap: break-word; width: 800px">
                Hello world, how are you? More text here to see if it wraps after a long while of writing and it does on Firefox but I have not tested it on Chrome yet. It also works wonders if you have a medium to long paragraph. Just avoid writing in the CSS file that the words have to break-all, that's a small tip.
            </div>
        </td>
    </tr>
</table>

ในส่วนของ CSS ลอง:

background-size: auto;

table-layout: fixed;

ลองสิ่งนี้

div {display: inline;}

ฉันใช้ bootstrap รหัส html ของฉันดูเหมือน ..

<div class="container mt-3" style="width: 100%;">
  <div class="row">
    <div class="col-sm-12 wrap-text">
      <h6>
        text content
      </h6>
    </div>
  </div>
</div>

CSS

.wrap-text {
     text-align:justify;
}

คุณสามารถใช้CSSนี้

p {
  width: min-content;
  min-width: 100%;
}

ลอง:

overflow-wrap: break-word;

ใช้word-wrap:break-wordแอตทริบิวต์พร้อมกับความกว้างที่ต้องการ ส่วนใหญ่ใส่ ความกว้างเป็นพิกเซลไม่ใช่เปอร์เซ็นต์

width: 200px;
word-wrap: break-word;