div 文字橫排是指利用 div 元素實現多個文字在一行顯示的效果。在網頁設計中，常常需要將多個文字塊水平排列，用于組合成各種導航欄、菜單欄、標簽欄等等。通過使用 div 元素以及 CSS 屬性，可以輕松實現文字的橫向排列，并實現各種樣式的自定義。
下面將分別介紹三個具體案例，展示如何使用 div 元素實現文字的橫排效果。
案例一：基礎排列 在這個案例中，我們將展示一個最基礎的 div 文字橫排效果。，我們需要創建一個 div 元素，并將其設置為塊級元素，并通過 CSS 屬性設置其寬度為自適應，并使其內部的文字水平排列。

<style>
.container {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
<br>
  .item {
display: inline-block;
}
</style>
<br>
<div class="container">
<div class="item">文字1</div>
<div class="item">文字2</div>
<div class="item">文字3</div>
</div>

在上述代碼中，我們為包含文字的容器 div 設置了一些基礎樣式。通過設置white-space: nowrap;，我們確保文字不會換行；通過設置overflow: hidden;和text-overflow: ellipsis;，我們使文字溢出時顯示省略號；最后，我們設置容器 div 的寬度為 100% ，使其自適應瀏覽器寬度。
在容器 div 內部，我們定義了每個文字塊的樣式類 .item，并通過display: inline-block;屬性使其水平排列。
案例二：帶有間距的排列 在某些情況下，我們可能希望文字之間有一定的間距。這個時候，我們可以使用 margin 屬性來設置文字塊之間的間距。以下是一個示例代碼：

<style>
.container {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
<br>
  .item {
display: inline-block;
margin-right: 10px;
}
</style>
<br>
<div class="container">
<div class="item">文字1</div>
<div class="item">文字2</div>
<div class="item">文字3</div>
</div>

在上述代碼中，我們在 .item 樣式類中添加了margin-right: 10px;屬性，表示文字塊之間的右側間距為 10 像素。
案例三：自定義樣式 在實際應用中，我們可能需要根據具體設計要求定制文字塊的樣式，包括字體、顏色、背景等。以下是一個示例代碼，展示了如何通過 CSS 樣式表定制文字塊的樣式：

<style>
.container {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
<br>
  .item {
display: inline-block;
padding: 5px;
font-size: 14px;
color: #333;
background-color: #f2f2f2;
border-radius: 5px;
}
</style>
<br>
<div class="container">
<div class="item">文字1</div>
<div class="item">文字2</div>
<div class="item">文字3</div>
</div>

在上述代碼中，我們通過在 .item 樣式類中添加了一些屬性，實現了文字塊的圓角背景、邊距和顏色等定制樣式。
通過以上三個案例，我們展示了如何通過 div 元素以及 CSS 樣式表實現文字橫向排列。靈活運用這些思路，我們可以根據實際需求定制各種不同風格的文字橫排效果，提升網頁設計的質量與用戶體驗。