CSS 实现元素超出 `overflow: hidden` 的容器显示

by fehey

HTML

<div class="container-wrapper">
  <div class="container">一个昵称一个昵称一个昵称一个昵称一个昵称一个昵称</div>
</div>

<style>
  .container-wrapper {
    position: relative;
    
    margin: 50px;
  }

  .container {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    width: 200px;
    border: 1px solid #e3e3e0;
  }

  .container::before {
    content: '@';
    position: absolute;
    left: -11px;
    top: 0;
  }
</style>