Làm cách nào để tránh ngắt dòng TRƯỚC KHI HOẶC SAU một phần tử?

Question

Tôi có một danh sách định nghĩa. My <dt> và <dd> được đặt trong CSS là display: inline-block;. Và tôi muốn tránh ngắt dòng trước phần tử <dd> và sau phần tử <dt>. Tôi làm nó như thế nào?

danh sách của tôi trông như thế này, với một ngắt dòng sau term3:

TERM1: def1; term2: def2; term3:
def3;

Tôi muốn nó trông như thế này (các ngắt dòng sẽ xuất hiện trước khi term3:

TERM1: def1; TERM2: def2;
term3: def3;

Answer 1

Cách duy nhất Tôi có thể nghĩ để làm điều này là đặt độ rộng cho từng phần tử sao cho có một điểm ngắt có thể dự đoán được trên mỗi dòng.

Answer 2

Cột đơn (HTML hợp lệ):

<style type="text/css"> 
    dt, dd { display: inline-block; float: left; } 
    dt { clear: left; } 
</style> 

<dl> 
    <dt>term1</dt><dd>def1</dd> 
    <dt>term2</dt><dd>def2</dd> 
    <dt>term3</dt><dd>def3</dd> 
</dl> 

Không-Bọc <span> (không hợp lệ HTML):

<style type="text/css"> 
    dt, dd { display: inline-block; } 
    span { white-space: nowrap; } 
</style> 

<dl> 
    <span><dt>term1</dt><dd>def1</dd></span> 
    <span><dt>term2</dt><dd>def2</dd></span> 
    <span><dt>term3</dt><dd>def3</dd></span> 
</dl> 

Answer 3

Đối với tôi nó làm việc bằng cách chỉ xác định dt và dd trên cùng một dòng cùng với inline phong cách hiển thị, như thế này:

<style type="text/css"> 
    dt, dd { display: inline; } 
</style> 

<dl> 
    <dt>term1</dt><dd>def1</dd> 
    <dt>term2</dt><dd>def2</dd> 
    <dt>term3</dt><dd>def3</dd> 
</dl> 

thay vì những gì tôi đã có trước đây:

<style type="text/css"> 
    dt, dd { display: inline; } 
</style> 

<dl> 
    <dt>term1 
    <dd>def1 
    <dt>term2 
    <dd>def2 
    <dt>term3 
    <dd>def3 
</dl> 

dường như làm việc tốt khi tự động thay đổi kích thước cửa sổ trình duyệt - Tôi chưa bao giờ nhìn thấy nó phá vỡ giữa dt và dd duy nhất giữa dd và dt.