在網(wǎng)頁設(shè)計中，經(jīng)常會出現(xiàn)多行文字配合一張圖片的情況，如果圖片的標題顯示不完全或超出寬度則會影響美觀性和用戶閱讀體驗。下面通過CSS的技術(shù)來實現(xiàn)圖片標題在一行顯示的效果。

HTML代碼：
<div class="card">
<img src="image.png" alt="圖片標題">
<p class="title">圖片標題</p>
</div>
CSS代碼：
.card{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 300px;
}
img{
max-width: 100%;
}
.title{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}

首先，需要創(chuàng)建一個帶有圖片和標題的容器，使用flex布局，設(shè)置子元素垂直居中并居中對齊。為了防止圖片過大，使其超出容器范圍，應(yīng)對其進行最大寬度限制。標題部分使用white-space屬性來控制是否換行，overflow屬性來控制超出范圍是否截斷，text-overflow屬性來控制超出部分如何顯示，這里使用省略號顯示超出部分，并設(shè)置max-width屬性來限制標題最大寬度。

總之，利用CSS的技術(shù)可以很方便地實現(xiàn)圖片標題在一行顯示的效果，提高了美觀性和用戶閱讀體驗。