CSS中的連字符斷行是一種常用的技巧，它可以使長字符串在HTML文檔中自動斷行，從而避免了較長的文本內容導致頁面排版混亂的情況發生。

/* 使用連字符斷行 */
.long-text {
word-break: break-all;
word-wrap: break-word;
}

上述代碼中，“word-break: break-all;”指定了長詞匯在行尾截斷，而“word-wrap: break-word;”則指定了長單詞在中間截斷。兩個屬性的聯合使用，可以實現良好的頁面排版效果。

此外，連字符斷行在創建網格布局時也非常有用。使用 hyphens 屬性，我們可以在無法容納整個單詞時，在單詞內部插入連字符斷行。

/* 使用 hyphens 屬性制作網格布局 */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
hyphens: auto;
}

上述代碼中，“grid-template-columns: repeat(3, 1fr);”指定了網格布局的列數為3，而“grid-gap: 10px;”指定了各個單元格之間的距離。最后的“hyphens: auto;”則實現了在單詞內部插入連字符斷行的效果。

總之，使用CSS中的連字符斷行對于長字符串的排版和網格布局都非常有用，我們可以提高頁面的可讀性和美感。