ป้องกันการแบ่งบรรทัดขององค์ประกอบช่วง

ฉันมี<span>องค์ประกอบที่ฉันต้องการแสดงโดยไม่มีตัวแบ่งบรรทัด ฉันจะทำสิ่งนั้นได้อย่างไร

ใส่สิ่งนี้ใน CSS ของคุณ:

white-space:nowrap;

รับข้อมูลเพิ่มเติมได้ที่นี่: http://www.w3.org/wiki/CSS/Properties/white-space

white-space

white-spaceคุณสมบัติประกาศว่าพื้นที่สีขาวภายในองค์ประกอบมีการจัดการ

ค่า

normal ค่านี้จะนำตัวแทนผู้ใช้เพื่อยุบลำดับของพื้นที่สีขาวและแบ่งบรรทัดตามความจำเป็นในการกรอกข้อมูลลงในกล่องรายการ

pre ค่านี้ป้องกันตัวแทนผู้ใช้จากการยุบลำดับของ white space บรรทัดจะแตกที่บรรทัดใหม่ในแหล่งที่มาหรือเกิดขึ้นที่ "\ A" ในเนื้อหาที่สร้างขึ้น

nowrap ค่านี้จะยุบพื้นที่สีขาวสำหรับ 'ปกติ' แต่จะหยุดการขึ้นบรรทัดใหม่ภายในข้อความ

pre-wrap ค่านี้ป้องกันตัวแทนผู้ใช้จากการยุบลำดับของ white space บรรทัดจะแตกที่บรรทัดใหม่ในแหล่งที่มาที่เกิดขึ้นของ "\ A" ในเนื้อหาที่สร้างขึ้นและตามความจำเป็นในการกรอกกล่องสาย

pre-line ค่านี้สั่งให้ตัวแทนผู้ใช้เพื่อยุบลำดับของ white space บรรทัดจะแตกที่บรรทัดใหม่ในแหล่งที่มาที่เกิดขึ้นของ "\ A" ในเนื้อหาที่สร้างขึ้นและตามความจำเป็นในการกรอกกล่องสาย

inherit รับค่าที่ระบุเหมือนกับทรัพย์สินของพาเรนต์ขององค์ประกอบ

หากคุณต้องการป้องกันการแบ่งบรรทัดของอักขระเว้นวรรคคุณสามารถใช้ เอนทิตีระหว่างคำได้:

No line break

แทน

<span style="white-space:nowrap">No line break</span>

white-space: nowrapเป็นทางออกที่ถูกต้อง แต่จะป้องกันไม่ให้มีการแบ่งในบรรทัด หากคุณต้องการป้องกันการขึ้นบรรทัดใหม่ระหว่างสององค์ประกอบมันจะซับซ้อนกว่านี้เล็กน้อย:

<p>
    <span class="text">Some text</span>
    <span class="icon"></span>
</p>

หากต้องการป้องกันการแบ่งระหว่างช่วง แต่อนุญาตให้มีการหยุดพักระหว่าง "บางคน" และ "ข้อความ" สามารถทำได้โดย:

p {
    white-space: nowrap;
}

.text {
    white-space: normal;
}

ดีพอสำหรับ Firefox ใน Chrome  คุณยังต้องแทนที่ช่องว่างระหว่างช่วงที่มี (การลบช่องว่างออกใช้ไม่ได้)

ด้วย Bootstrap 4 Class:

text-nowrap

Ref: https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow