หลีกเลี่ยงการแบ่งบรรทัดระหว่างองค์ประกอบ html

ฉันมี<td>องค์ประกอบนี้:

<td><i class="flag-bfh-ES"></i>&nbsp;+34&nbsp;666&nbsp;66&nbsp;66&nbsp;66</td>

ฉันหวังว่าจะเก็บไว้เป็นบรรทัดเดียว แต่นี่คือสิ่งที่ฉันได้รับ:

ดังที่คุณเห็นธงและหมายเลขโทรศัพท์อยู่ในบรรทัดแยกกัน  กำลังทำงานอยู่ในระหว่างตัวเลขของหมายเลขโทรศัพท์ แต่ไม่ได้อยู่ระหว่างธงและหมายเลขโทรศัพท์

ฉันจะแน่ใจได้อย่างไรว่าไม่มีการใช้ตัวแบ่งบรรทัดเลยโดยตัวแสดงผล

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

ทางเลือกที่ดีที่สุดคือการใช้nobrมาร์กอัปซึ่งไม่เป็นมาตรฐาน แต่ได้รับการสนับสนุนในระดับสากลและใช้งานได้แม้ว่า CSS จะถูกปิดใช้งาน:

<td><nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</nobr></td>

(คุณทำได้ แต่ไม่จำเป็นต้องใช้ แทนช่องว่างในกรณีนี้)

อีกวิธีหนึ่งคือnowrapแอตทริบิวต์ (เลิกใช้แล้ว / ล้าสมัย แต่ยังใช้งานได้ดียกเว้นนิสัยใจคอที่หายาก):

<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

จากนั้นมีวิธี CSS ซึ่งทำงานในเบราว์เซอร์ที่เปิดใช้งาน CSS และต้องการโค้ดเพิ่มอีกเล็กน้อย:

<style>
.nobr { white-space: nowrap }
</style>
...
<td class=nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

CSS สำหรับ td white-space: nowrap;นั้นควรแก้

หากคุณต้องการสิ่งนี้สำหรับคำหรือองค์ประกอบหลาย ๆ คำ แต่ไม่สามารถนำไปใช้กับ TD ทั้งหมดหรือคล้ายกันสามารถใช้แท็ก Span ได้

<span style="white-space: nowrap">Text to break together</span>
    or 
<span class=nobr>Text to break together</span>

หากคุณใช้เวอร์ชันคลาสอย่าลืมตั้งค่า CSS ตามรายละเอียดในคำตอบที่ยอมรับ

หาก<i>แท็กไม่แสดงเป็นบล็อกและก่อให้เกิด probelm สิ่งนี้ควรใช้งานได้:

<td style="white-space:nowrap;"><i class="flag-bfh-ES"></i>&nbsp;+34&nbsp;666&nbsp;66&nbsp;66&nbsp;66</td>

ในบางกรณี (เช่น html ที่สร้างและแทรกโดย JavaScript) คุณอาจต้องการลองแทรกตัวเชื่อมความกว้างศูนย์:

.wrapper{
  width: 290px;   
  white-space: no-wrap;
  resize:both;
  overflow:auto; 
  border: 1px solid gray;
}

.breakable-text{
  display: inline;
  white-space: no-wrap;
}

.no-break-before {
  padding-left: 10px;
}

<div class="wrapper">
<span class="breakable-text">Lorem dorem tralalalala LAST_WORDS</span>&#8205;<span class="no-break-before">TOGETHER</span>
</div>

นี่คือทางออกที่แท้จริง:

<td>
  <span class="inline-flag">
    <i class="flag-bfh-ES"></i> 
    <span>+34 666 66 66 66</span>
  </span>
</td>

css:

.inline-flag {
   position: relative;
   display: inline;
   line-height: 14px; /* play with this */
}

.inline-flag > i {
   position: absolute;
   display: block;
   top: -1px; /* play with this */
}

.inline-flag > span {
   margin-left: 18px; /* play with this */
}

ตัวอย่างรูปภาพที่อยู่ก่อนข้อความเสมอ:

โนบราไม่น่าเชื่อถือเกินไปให้ใช้ตาราง

<table>
      <tr>
          <td> something </td>
          <td> something </td>
      </tr>
</table>

ทุกอย่างเป็นไปในแนวเดียวกันทุกอย่างมีระดับซึ่งกันและกันและคุณมีอิสระมากขึ้นหากต้องการเปลี่ยนแปลงบางสิ่งในภายหลัง