CSS文本溢出处理

现在有以下html片段：

    <div class="right-main" style="display: flex;justify-content: center;gap: 20px">
      <div class="single-row" style="width: 200px;">
        <h2>单行文本溢出</h2>
        <p class="single-row-overflow">
          《酬乐天扬州初逢席上见赠》是唐代文学家刘禹锡创作的一首诗。此诗首先紧承白居易诗《醉赠刘二十八使君》末联“亦知合被才名折，二十三年折太多”之句，对自己被贬谪、遭弃置的境遇，表达了无限辛酸和愤懑不平。然后写自己归来的感触：老友已逝，只有无尽的怀念之情，人事全非，自己恍若隔世之人。无限悲痛怅惘之情，不禁油然而生。诗人于是推开一步，沉舟侧畔，千帆竞发；病树前头，万木争春。一洗伤感低沉情调，尽显慷慨激昂气概。末联点明酬赠题意，既是对友人关怀的感谢，也是和友人共勉，表现了诗人坚定的意志和乐观的精神。全诗感情真挚，沉郁中见豪放，不仅反映了深刻的人生哲理，也具有很强的艺术感染力。
        </p>
      </div>
      <div class="multi-row" style="width: 200px;">
        <h2>多行文本溢出</h2>
        <p class="multi-row-overflow">
          《酬乐天扬州初逢席上见赠》是唐代文学家刘禹锡创作的一首诗。此诗首先紧承白居易诗《醉赠刘二十八使君》末联“亦知合被才名折，二十三年折太多”之句，对自己被贬谪、遭弃置的境遇，表达了无限辛酸和愤懑不平。然后写自己归来的感触：老友已逝，只有无尽的怀念之情，人事全非，自己恍若隔世之人。无限悲痛怅惘之情，不禁油然而生。诗人于是推开一步，沉舟侧畔，千帆竞发；病树前头，万木争春。一洗伤感低沉情调，尽显慷慨激昂气概。末联点明酬赠题意，既是对友人关怀的感谢，也是和友人共勉，表现了诗人坚定的意志和乐观的精神。全诗感情真挚，沉郁中见豪放，不仅反映了深刻的人生哲理，也具有很强的艺术感染力。
        </p>
      </div>
    </div>

单行溢出...处理：

    .single-row-overflow {
      border: 1px solid #ccc;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

多行溢出..处理：

    .multi-row-overflow {
      border: 1px solid #ccc;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      overflow: hidden;
    }