在网页设计中，经常会出现多行文字配合一张图片的情况，如果图片的标题显示不完全或超出宽度则会影响美观性和用户阅读体验。下面通过CSS的技术来实现图片标题在一行显示的效果。

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%;
}

首先，需要创建一个带有图片和标题的容器，使用flex布局，设置子元素垂直居中并居中对齐。为了防止图片过大，使其超出容器范围，应对其进行最大宽度限制。标题部分使用white-space属性来控制是否换行，overflow属性来控制超出范围是否截断，text-overflow属性来控制超出部分如何显示，这里使用省略号显示超出部分，并设置max-width属性来限制标题最大宽度。

总之，利用CSS的技术可以很方便地实现图片标题在一行显示的效果，提高了美观性和用户阅读体验。