家里LD会计培训，需要参与会计改革与发展“十四五”规划网络知识竞赛，题库来源自相关的几篇规划与纲要。为了搜索方便，干脆把几篇题库来源文章转载到了博客上，利用浏览器自带的搜索查询相关语句。因为这几篇文章的标题都比较长：类似这样《注册会计师行业发展规划（2021—2025年）》，在手机浏览的时候标题产生了换行。
这个主题的首页文章高度本来是完全靠图片高度撑开，图片四周具有相同的margin值，所以图片具有垂直居中的效果，因为标题的高度变化，右侧容器的高度随之变大，导致图片视觉上偏上了许多。
之前记录过文本强制单行，有溢出则隐藏溢出部分的方法，只需要给标题的a链接加上以下的属性就可以了：
display:block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
标题加上溢出则省略的属性之后，强制单行显示，但始终还是觉得哪里不对：
就象图片显示的一样，省略效果没有生效之前，缩略图的尺寸都是相同的，一旦某个标题触发了省略，图片的比例产生了变化，比正常的图片小了一圈。检查了一下发生异常显示效果的容器，右侧文字部分容器的长度比css设置的长出了一截，也就是说，虽然文字并省略了，但是文字省略的过程中挤开了右侧的文字部分容器，导致了文字部分的异常。尝试给右侧容器也添加了一个overflow的效果，页面效果就正常了:
overflow: hidden;
页面最终展现如下，猜测是overflow属性允许右侧容器在内部元素有溢出的情况时，简单粗暴的执行剪裁，从而确保了其自身尺寸的稳定：
