css不换行省略号第二行 |css 翻转图片 ie9

首先，大家需要给文本所在元素设置一些基本样式。在此文章中，大家使用p标签作为例子，其它标签同理。需要注意的是，如果父元素中有设置宽度，内边距，外边距等属性，需要将这些属性清除掉，以免对后续的样式造成影响。

p {
margin: 0;
padding: 0;
width: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

上述代码清除了p标签的外边距，内边距，并将宽度设置为自动，以防止出现意外的宽度限制。其中，white-space属性设置为nowrap表示强制不换行，overflow属性设置为hidden表示隐藏溢出文本，text-overflow属性设置为ellipsis表示使用省略号替代溢出文本。

接下来，大家需要将第二行的文本进行调整并展示省略号。由于大家需要在第二行而不是第一行展示省略号，因此大家需要对文本进行切分，并将第二行通过伪元素before调整到可视区域内。

p::before {
content: "...";
position: absolute;
right: 0;
bottom: 0;
transform: translateX(100%);
}

上述代码中，大家使用伪元素before添加了文本。在position属性中，大家将定位到右下角。在transform属性中，大家使用translateX(100%)将元素沿着X轴向右移动，使其仅展示在第二行上。

这样，大家就实现了在不换行的情况下，在第二行显示省略号的样式。