我如何在CSS中制作响应式省略号

Question

我想在这个 div 中制作响应式省略文本

我正在使用此代码：

HTML

<div class="listing" id="listing-1">
  <div class="icon-name-cat">
      <img src="music.svg">
    <div class="name-cat">
      <p class="name">Hymn for the weekend</p>
      <p class="singer">Coldplay</p>
    </div>
  </div>
  <div class="play-now">
    Play Now
    <img src="play-now.svg">
  </div>
</div>

CSS

.listing .icon-name-cat .name-cat .name {
    width: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Answer 1

我希望这能解决您的问题<3

*,
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: system-ui;
}

body {
  background-color: #121212;
  color: #fff;
  height: 100vh;
  display: grid;
  place-items: center;
}

.listing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border: 3px solid;
  border-radius: 8px;
  width: 340px;
  margin: 12px;
}

.icon-name-cat,
.play-now {
  display: flex;
  align-items: center;
}

.icon-name-cat .name,
.icon-name-cat .singer {
  font-size: 16px;
  white-space: nowrap;
  width: 10vw;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-name-cat .singer {
  font-size: 12px;
  width: 100px;
}

.listing svg {
  fill: #fff;
  height: 30px;
  cursor: pointer;
}

<div class="listing" id="listing-1">
  <div class="icon-name-cat">
    <div class="music_svg">
      <svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48">
            <path
              d="M396.077-143.848q-55.519 0-94.105-38.586-38.586-38.586-38.586-94.105 0-55.519 38.586-94.105 38.586-38.586 94.105-38.586 26.462 0 48.769 8.577 22.308 8.577 38.539 24.5v-411.153q0-12.519 8.209-20.683 8.209-8.163 20.796-8.163h155.406q12.587 0 20.703 8.163 8.115 8.164 8.115 20.683v54.614q0 12.519-8.164 20.682-8.163 8.164-20.682 8.164h-139v427.307q0 55.519-38.586 94.105-38.586 38.586-94.105 38.586Z"
            />
          </svg>
    </div>
    <div class="name-cat">
      <p class="name">Hymn for the weekend</p>
      <p class="singer">Coldplay</p>
    </div>
  </div>
  <div class="play-now">
    Play Now
    <div class="play_svg">
      <svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48">
            <path
              d="M340.001-291.464v-381.533q0-13.616 8.682-21.231 8.683-7.616 20.387-7.616 3.393 0 7.518.808t7.875 2.808l300.15 192.151q6.615 4.616 10.115 10.423 3.5 5.808 3.5 13.423 0 7.616-3.5 13.423-3.5 5.808-10.115 10.423l-300.15 192.152q-3.784 2-7.946 2.807-4.162.808-7.561.808-11.724 0-20.339-7.615-8.616-7.616-8.616-21.231Zm45.384-190.767Zm0 161 253.999-161L385.385-643.23v321.999Z"
            />
          </svg>
    </div>
  </div>
</div>