行内元素换行时的样式问题

最近在写项目的时候遇到一个行内元素换行时的样式问题，写个demo给大家复现一下

行内块在换行的时候会有截断的效果，看起来效果不是很好，经过查看文档发现一个css属性可以弥补这个不完美。

box-decoration-break 属性用来定义当元素跨多行、多列或多页时，元素的片段应如何呈现

将属性设置为slice时，就是上面的那种效果。 元素被按照盒子被切割前的原始样式渲染，之后，针对每个行/列/页面将此假设框渲染成片段。
box-decoration-break: slice;
-webkit-box-decoration-break: slice;

//box-decoration-break 属性用来定义当元素跨多行、多列或多页时，元素的片段应如何呈现
//将属性设置为clone时，每个框片段与指定的边框、填充和边距独立呈现。
box-decoration-break: clone;
-webkit-box-decoration-break: clone;


//将属性设置为slice时， 元素被按照盒子被切割前的原始样式渲染，之后，针对每个行/列/页面将此假设框渲染成片段
box-decoration-break: slice;
-webkit-box-decoration-break: slice;

将属性设置为clone时，每个框片段与指定的边框、填充和边距独立呈现。

box-decoration-break: clone;
-webkit-box-decoration-break: clone;

现在换行的位置会和开头的样式保持一致