Tránh ngắt dòng giữa các phần tử html

Tôi có <td>phần tử này :

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

Tôi đã hy vọng giữ nó thành một dòng, nhưng đây là những gì tôi nhận được:

Như bạn có thể thấy, cờ và số điện thoại nằm ở các dòng riêng biệt. Chúng  đang hoạt động giữa các số của số điện thoại, nhưng không hoạt động giữa cờ và số điện thoại.

Làm cách nào để đảm bảo rằng không có ngắt dòng nào được giới thiệu bởi trình kết xuất?

Có một số cách để ngăn ngắt dòng trong nội dung. Sử dụng  là một cách và hoạt động tốt giữa các từ, nhưng sử dụng nó giữa một phần tử trống và một số văn bản không có tác dụng rõ ràng. Điều tương tự cũng sẽ áp dụng cho cách tiếp cận hợp lý hơn và dễ tiếp cận hơn, trong đó bạn sử dụng hình ảnh cho một biểu tượng.

Giải pháp thay thế mạnh mẽ nhất là sử dụng nobrđánh dấu, không tiêu chuẩn nhưng được hỗ trợ trên toàn cầu và hoạt động ngay cả khi CSS bị tắt:

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

(Bạn có thể, nhưng không cần, sử dụng  thay thế cho dấu cách trong trường hợp này.)

Một cách khác là nowrapthuộc tính (không dùng nữa / lỗi thời, nhưng vẫn hoạt động tốt, ngoại trừ một số điểm lạ hiếm gặp):

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

Sau đó, có cách CSS, hoạt động trong các trình duyệt hỗ trợ CSS và cần thêm một đoạn mã:

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

CSS cho td: white-space: nowrap;nên giải quyết nó.

Nếu bạn cần điều này cho một số từ hoặc phần tử, nhưng không thể áp dụng nó cho toàn bộ TD hoặc tương tự, thẻ Span có thể được sử dụng.

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

Nếu bạn sử dụng phiên bản lớp, hãy nhớ thiết lập CSS như chi tiết trong câu trả lời được chấp nhận.

Nếu <i>thẻ không được hiển thị dưới dạng khối và gây ra sự cố thì điều này sẽ hoạt động:

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

Trong một số trường hợp (ví dụ: html được tạo và chèn bởi JavaScript), bạn cũng có thể muốn thử chèn một bộ nối có độ rộng bằng không:

.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>

Đây là giải pháp thực sự:

<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 */
}

Ví dụ, hình ảnh luôn đứng trước văn bản:

nobr quá không đáng tin cậy, sử dụng bảng

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

Tất cả đều diễn ra trên cùng một đường thẳng, mọi thứ đều bình đẳng với nhau và bạn có nhiều tự do hơn nếu bạn muốn thay đổi điều gì đó sau này.