Làm cách nào để đặt tràn văn bản thành dấu ba chấm trong bố cục lưới CSS?

Question

Tôi có bố cục lưới như bố cục ở header bên dưới. Có một văn bản trong div có chiều rộng là 1fr. Tôi muốn văn bản bên trong div đó bị cắt ngắn khi nó quá dài. Thêm text-overflow làm ellpsis không hoạt động. Bất kỳ ý tưởng làm thế nào để làm điều đó?

Nó phải là lưới và không có cách nào tôi có thể thay đổi điều đó.

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
body { 
 
    display: flex; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1; 
 
} 
 

 
content { 
 
    flex: 1; 
 
    background-color: red; 
 
} 
 

 
header { 
 
    background-color: limegreen; 
 
    display: grid; 
 
    grid-template-columns: 0fr 1fr 0fr; 
 
} 
 

 
header div { 
 
    border: 1px solid orange; 
 
} 
 

 
.long { 
 
    text-overflow: ellipsis; 
 
}

<div class="container"> 
 
    <header> 
 
    <div>Left</div> 
 
    <div class="long">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> 
 
    <div>Right</div> 
 
    </header> 
 
    <content> 
 
    </content> 
 
</div>

Answer 1

thay đổi .long c ss xuống dưới

.long { 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
} 

lý do tại sao bạn cần phải thêm trắng sapce và tràn dưới:

1. bạn cần white-space: nowrap nói với các trình duyệt để không quấn khi độ dài văn bản vượt quá chứa khối chiều rộng, white-space tính giá trị mặc định là bình thường, cho biết nó có thể bọc, vì vậy nó sẽ không tồn tại tình huống tràn văn bản;
2. overflow giá trị mặc định hiển thị, khi văn bản vượt quá khối chứa, nó chỉ hiển thị, do đó không cần tràn văn bản để hiển thị, chỉ khi bạn đặt overflow thành hidden. Sau đó, khi văn bản không thể hiển thị đầy đủ, nó sẽ sử dụng thuộc tính text-overflow.

Answer 2

Thêm overflow: hidden và white-space: nowrap khi bạn sử dụng text-overflow

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
body { 
 
    display: flex; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1; 
 
} 
 

 
content { 
 
    flex: 1; 
 
    background-color: red; 
 
} 
 

 
header { 
 
    background-color: limegreen; 
 
    display: grid; 
 
    grid-template-columns: 0fr 1fr 0fr; 
 
} 
 

 
header div { 
 
    border: 1px solid orange; 
 
} 
 

 
.long { 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
}

<div class="container"> 
 
    <header> 
 
    <div>Left</div> 
 
    <div class="long">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> 
 
    <div>Right</div> 
 
    </header> 
 
    <content> 
 
    </content> 
 
</div>

Answer 3

1) khi sử dụng text-overflow: ellipsis; cũng phải sử dụng overflow: hidden;.

2) white-space: nowrap; Không cho phép ngắt văn bản trong dòng mới.

Vì vậy, thay đổi như thế này:

.long { 
    text-overflow: ellipsis; 
    overflow: hidden;/*/<------------new/*/ 
    white-space: nowrap;/*/<---------new/*/ 
} 

Answer 4

Xác định chiều cao, thiết white-space-nowrap và overflow: hidden

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
body { 
 
    display: flex; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1; 
 
} 
 

 
content { 
 
    flex: 1; 
 
    background-color: red; 
 
} 
 

 
header { 
 
    background-color: limegreen; 
 
    display: grid; 
 
    grid-template-columns: 0fr 1fr 0fr; 
 
} 
 

 
header div { 
 
    border: 1px solid orange; 
 
} 
 

 
.long { 
 
    height: 20px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="container"> 
 
    <header> 
 
    <div>Left</div> 
 
    <div class="long">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> 
 
    <div>Right</div> 
 
    </header> 
 
    <content> 
 
    </content> 
 
</div>