<div class="container">
  <div class="card">
    <div class="card__media">
      <svg t="1642040398269" class="icon" viewBox="0 0 1070 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2228" width="200" height="200">
        <path d="M981.783273 0H85.224727C38.353455 0 0 35.374545 0 83.083636v844.893091c0 47.616 38.353455 86.574545 85.178182 86.574546h903.633454c46.917818 0 81.733818-38.958545 81.733819-86.574546V83.083636C1070.592 35.374545 1028.701091 0 981.783273 0zM335.825455 135.912727c74.193455 0 134.330182 60.974545 134.330181 136.285091 0 75.170909-60.136727 136.192-134.330181 136.192-74.286545 0-134.516364-61.021091-134.516364-136.192 0-75.264 60.229818-136.285091 134.516364-136.285091z m-161.512728 745.937455a41.890909 41.890909 0 0 1-27.648-10.379637 43.752727 43.752727 0 0 1-4.654545-61.067636l198.097454-255.162182a42.123636 42.123636 0 0 1 57.716364-6.702545l116.549818 128.139636 286.906182-352.814545c14.615273-18.711273 90.251636-106.775273 135.866182-6.935273 0.093091-0.093091 0.093091 112.965818 0.232727 247.761455 0.093091 140.8 0.093091 317.067636 0.093091 317.067636-1.024-0.093091-762.740364 0.093091-763.112727 0.093091z" p-id="2229" fill="currentColor"></path>
      </svg>
    </div>
    <div class="card__title">不对标题做任何的截取和处理</div>
    <div class="card__action">
      <svg t="1642040481701" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6473" width="200" height="200">
        <path d="M804.326 552.315c0 0-199.191 13.99-271.095 202.959v-145.986c211.945-119.89 240.217-248.19 241.811-296.611 0.29-5.509 0.432-10.945 0.143-16.453-4.493-77.197-69.873-136.346-146.13-132.213-39.578 2.244-73.936 21.309-97.565 49.65-1.305 1.232-2.465 2.684-3.771 3.986-6.235 6.451-12.033 13.267-16.963 20.66-5.651-8.19-11.887-15.947-18.991-22.832-0.724-0.583-1.16-1.233-1.739-1.815-23.774-28.483-57.99-47.405-97.712-49.65-76.254-4.133-141.635 55.016-145.986 132.213-0.29 5.509-0.144 10.945 0.147 16.453 1.449 48.204 29.72 175.995 240.217 295.741v137.433c-75.096-179.548-267.038-193.538-267.038-193.538-13.626 301.977 189.188 356.556 267.038 366.415v2.174h46.537v-1.668c74.225-8.408 285.158-59.146 271.096-366.922z" p-id="6474" fill="currentColor"></path>
      </svg>
    </div>
  </div>
  <div class="card card--overflow-hidden">
    <div class="card__media" style="--color: #673EA8; --background: #3A1575">
      <svg t="1642040398269" class="icon" viewBox="0 0 1070 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2228" width="200" height="200">
        <path d="M981.783273 0H85.224727C38.353455 0 0 35.374545 0 83.083636v844.893091c0 47.616 38.353455 86.574545 85.178182 86.574546h903.633454c46.917818 0 81.733818-38.958545 81.733819-86.574546V83.083636C1070.592 35.374545 1028.701091 0 981.783273 0zM335.825455 135.912727c74.193455 0 134.330182 60.974545 134.330181 136.285091 0 75.170909-60.136727 136.192-134.330181 136.192-74.286545 0-134.516364-61.021091-134.516364-136.192 0-75.264 60.229818-136.285091 134.516364-136.285091z m-161.512728 745.937455a41.890909 41.890909 0 0 1-27.648-10.379637 43.752727 43.752727 0 0 1-4.654545-61.067636l198.097454-255.162182a42.123636 42.123636 0 0 1 57.716364-6.702545l116.549818 128.139636 286.906182-352.814545c14.615273-18.711273 90.251636-106.775273 135.866182-6.935273 0.093091-0.093091 0.093091 112.965818 0.232727 247.761455 0.093091 140.8 0.093091 317.067636 0.093091 317.067636-1.024-0.093091-762.740364 0.093091-763.112727 0.093091z" p-id="2229" fill="currentColor"></path>
      </svg>
    </div>
    <div class="card__title">直接使用overflow的hidden来截取文本</div>
    <div class="card__action">
      <svg t="1642040481701" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6473" width="200" height="200">
        <path d="M804.326 552.315c0 0-199.191 13.99-271.095 202.959v-145.986c211.945-119.89 240.217-248.19 241.811-296.611 0.29-5.509 0.432-10.945 0.143-16.453-4.493-77.197-69.873-136.346-146.13-132.213-39.578 2.244-73.936 21.309-97.565 49.65-1.305 1.232-2.465 2.684-3.771 3.986-6.235 6.451-12.033 13.267-16.963 20.66-5.651-8.19-11.887-15.947-18.991-22.832-0.724-0.583-1.16-1.233-1.739-1.815-23.774-28.483-57.99-47.405-97.712-49.65-76.254-4.133-141.635 55.016-145.986 132.213-0.29 5.509-0.144 10.945 0.147 16.453 1.449 48.204 29.72 175.995 240.217 295.741v137.433c-75.096-179.548-267.038-193.538-267.038-193.538-13.626 301.977 189.188 356.556 267.038 366.415v2.174h46.537v-1.668c74.225-8.408 285.158-59.146 271.096-366.922z" p-id="6474" fill="currentColor"></path>
      </svg>
    </div>
  </div>
  <div class="card card--overflow-wrap">
    <div class="card__media" style="--color: #83A694; --background: #96BFAA">
      <svg t="1642040398269" class="icon" viewBox="0 0 1070 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2228" width="200" height="200">
        <path d="M981.783273 0H85.224727C38.353455 0 0 35.374545 0 83.083636v844.893091c0 47.616 38.353455 86.574545 85.178182 86.574546h903.633454c46.917818 0 81.733818-38.958545 81.733819-86.574546V83.083636C1070.592 35.374545 1028.701091 0 981.783273 0zM335.825455 135.912727c74.193455 0 134.330182 60.974545 134.330181 136.285091 0 75.170909-60.136727 136.192-134.330181 136.192-74.286545 0-134.516364-61.021091-134.516364-136.192 0-75.264 60.229818-136.285091 134.516364-136.285091z m-161.512728 745.937455a41.890909 41.890909 0 0 1-27.648-10.379637 43.752727 43.752727 0 0 1-4.654545-61.067636l198.097454-255.162182a42.123636 42.123636 0 0 1 57.716364-6.702545l116.549818 128.139636 286.906182-352.814545c14.615273-18.711273 90.251636-106.775273 135.866182-6.935273 0.093091-0.093091 0.093091 112.965818 0.232727 247.761455 0.093091 140.8 0.093091 317.067636 0.093091 317.067636-1.024-0.093091-762.740364 0.093091-763.112727 0.093091z" p-id="2229" fill="currentColor"></path>
      </svg>
    </div>
    <div class="card__title">overflow-wrap对长单词断行，eg. titlewithhaverylongwordtitlewithhaverylongword</div>
    <div class="card__action">
      <svg t="1642040481701" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6473" width="200" height="200">
        <path d="M804.326 552.315c0 0-199.191 13.99-271.095 202.959v-145.986c211.945-119.89 240.217-248.19 241.811-296.611 0.29-5.509 0.432-10.945 0.143-16.453-4.493-77.197-69.873-136.346-146.13-132.213-39.578 2.244-73.936 21.309-97.565 49.65-1.305 1.232-2.465 2.684-3.771 3.986-6.235 6.451-12.033 13.267-16.963 20.66-5.651-8.19-11.887-15.947-18.991-22.832-0.724-0.583-1.16-1.233-1.739-1.815-23.774-28.483-57.99-47.405-97.712-49.65-76.254-4.133-141.635 55.016-145.986 132.213-0.29 5.509-0.144 10.945 0.147 16.453 1.449 48.204 29.72 175.995 240.217 295.741v137.433c-75.096-179.548-267.038-193.538-267.038-193.538-13.626 301.977 189.188 356.556 267.038 366.415v2.174h46.537v-1.668c74.225-8.408 285.158-59.146 271.096-366.922z" p-id="6474" fill="currentColor"></path>
      </svg>
    </div>
  </div>
  <div class="card card--text-overflow">
    <div class="card__media" style="--color: #B0D2E5; --background: #55829B">
      <svg t="1642040398269" class="icon" viewBox="0 0 1070 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2228" width="200" height="200">
        <path d="M981.783273 0H85.224727C38.353455 0 0 35.374545 0 83.083636v844.893091c0 47.616 38.353455 86.574545 85.178182 86.574546h903.633454c46.917818 0 81.733818-38.958545 81.733819-86.574546V83.083636C1070.592 35.374545 1028.701091 0 981.783273 0zM335.825455 135.912727c74.193455 0 134.330182 60.974545 134.330181 136.285091 0 75.170909-60.136727 136.192-134.330181 136.192-74.286545 0-134.516364-61.021091-134.516364-136.192 0-75.264 60.229818-136.285091 134.516364-136.285091z m-161.512728 745.937455a41.890909 41.890909 0 0 1-27.648-10.379637 43.752727 43.752727 0 0 1-4.654545-61.067636l198.097454-255.162182a42.123636 42.123636 0 0 1 57.716364-6.702545l116.549818 128.139636 286.906182-352.814545c14.615273-18.711273 90.251636-106.775273 135.866182-6.935273 0.093091-0.093091 0.093091 112.965818 0.232727 247.761455 0.093091 140.8 0.093091 317.067636 0.093091 317.067636-1.024-0.093091-762.740364 0.093091-763.112727 0.093091z" p-id="2229" fill="currentColor"></path>
      </svg>
    </div>
    <div class="card__title">使用text-overflow在文本末尾添加省略号的标记符</div>
    <div class="card__action">
      <svg t="1642040481701" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6473" width="200" height="200">
        <path d="M804.326 552.315c0 0-199.191 13.99-271.095 202.959v-145.986c211.945-119.89 240.217-248.19 241.811-296.611 0.29-5.509 0.432-10.945 0.143-16.453-4.493-77.197-69.873-136.346-146.13-132.213-39.578 2.244-73.936 21.309-97.565 49.65-1.305 1.232-2.465 2.684-3.771 3.986-6.235 6.451-12.033 13.267-16.963 20.66-5.651-8.19-11.887-15.947-18.991-22.832-0.724-0.583-1.16-1.233-1.739-1.815-23.774-28.483-57.99-47.405-97.712-49.65-76.254-4.133-141.635 55.016-145.986 132.213-0.29 5.509-0.144 10.945 0.147 16.453 1.449 48.204 29.72 175.995 240.217 295.741v137.433c-75.096-179.548-267.038-193.538-267.038-193.538-13.626 301.977 189.188 356.556 267.038 366.415v2.174h46.537v-1.668c74.225-8.408 285.158-59.146 271.096-366.922z" p-id="6474" fill="currentColor"></path>
      </svg>
    </div>
  </div>
  <div class="card card--line-clamp">
    <div class="card__media" style="--color: #973DC4; --background: #651F88">
      <svg t="1642040398269" class="icon" viewBox="0 0 1070 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2228" width="200" height="200">
        <path d="M981.783273 0H85.224727C38.353455 0 0 35.374545 0 83.083636v844.893091c0 47.616 38.353455 86.574545 85.178182 86.574546h903.633454c46.917818 0 81.733818-38.958545 81.733819-86.574546V83.083636C1070.592 35.374545 1028.701091 0 981.783273 0zM335.825455 135.912727c74.193455 0 134.330182 60.974545 134.330181 136.285091 0 75.170909-60.136727 136.192-134.330181 136.192-74.286545 0-134.516364-61.021091-134.516364-136.192 0-75.264 60.229818-136.285091 134.516364-136.285091z m-161.512728 745.937455a41.890909 41.890909 0 0 1-27.648-10.379637 43.752727 43.752727 0 0 1-4.654545-61.067636l198.097454-255.162182a42.123636 42.123636 0 0 1 57.716364-6.702545l116.549818 128.139636 286.906182-352.814545c14.615273-18.711273 90.251636-106.775273 135.866182-6.935273 0.093091-0.093091 0.093091 112.965818 0.232727 247.761455 0.093091 140.8 0.093091 317.067636 0.093091 317.067636-1.024-0.093091-762.740364 0.093091-763.112727 0.093091z" p-id="2229" fill="currentColor"></path>
      </svg>
    </div>
    <div class="card__title" style="--line-clamp: 1">使用line-clamp对文本进行截取，并且在最后一行文本末尾添加省略号标记符，它可以控制行数</div>
    <div class="card__action">
      <svg t="1642040481701" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6473" width="200" height="200">
        <path d="M804.326 552.315c0 0-199.191 13.99-271.095 202.959v-145.986c211.945-119.89 240.217-248.19 241.811-296.611 0.29-5.509 0.432-10.945 0.143-16.453-4.493-77.197-69.873-136.346-146.13-132.213-39.578 2.244-73.936 21.309-97.565 49.65-1.305 1.232-2.465 2.684-3.771 3.986-6.235 6.451-12.033 13.267-16.963 20.66-5.651-8.19-11.887-15.947-18.991-22.832-0.724-0.583-1.16-1.233-1.739-1.815-23.774-28.483-57.99-47.405-97.712-49.65-76.254-4.133-141.635 55.016-145.986 132.213-0.29 5.509-0.144 10.945 0.147 16.453 1.449 48.204 29.72 175.995 240.217 295.741v137.433c-75.096-179.548-267.038-193.538-267.038-193.538-13.626 301.977 189.188 356.556 267.038 366.415v2.174h46.537v-1.668c74.225-8.408 285.158-59.146 271.096-366.922z" p-id="6474" fill="currentColor"></path>
      </svg>
    </div>
  </div>
  <div class="card card--line-clamp">
    <div class="card__media" style="--color: #973DC4; --background: #651F88">
      <svg t="1642040398269" class="icon" viewBox="0 0 1070 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2228" width="200" height="200">
        <path d="M981.783273 0H85.224727C38.353455 0 0 35.374545 0 83.083636v844.893091c0 47.616 38.353455 86.574545 85.178182 86.574546h903.633454c46.917818 0 81.733818-38.958545 81.733819-86.574546V83.083636C1070.592 35.374545 1028.701091 0 981.783273 0zM335.825455 135.912727c74.193455 0 134.330182 60.974545 134.330181 136.285091 0 75.170909-60.136727 136.192-134.330181 136.192-74.286545 0-134.516364-61.021091-134.516364-136.192 0-75.264 60.229818-136.285091 134.516364-136.285091z m-161.512728 745.937455a41.890909 41.890909 0 0 1-27.648-10.379637 43.752727 43.752727 0 0 1-4.654545-61.067636l198.097454-255.162182a42.123636 42.123636 0 0 1 57.716364-6.702545l116.549818 128.139636 286.906182-352.814545c14.615273-18.711273 90.251636-106.775273 135.866182-6.935273 0.093091-0.093091 0.093091 112.965818 0.232727 247.761455 0.093091 140.8 0.093091 317.067636 0.093091 317.067636-1.024-0.093091-762.740364 0.093091-763.112727 0.093091z" p-id="2229" fill="currentColor"></path>
      </svg>
    </div>
    <div class="card__title" style="--line-clamp: 2">使用line-clamp对文本进行截取，并且在最后一行文本末尾添加省略号标记符，它可以控制行数</div>
    <div class="card__action">
      <svg t="1642040481701" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6473" width="200" height="200">
        <path d="M804.326 552.315c0 0-199.191 13.99-271.095 202.959v-145.986c211.945-119.89 240.217-248.19 241.811-296.611 0.29-5.509 0.432-10.945 0.143-16.453-4.493-77.197-69.873-136.346-146.13-132.213-39.578 2.244-73.936 21.309-97.565 49.65-1.305 1.232-2.465 2.684-3.771 3.986-6.235 6.451-12.033 13.267-16.963 20.66-5.651-8.19-11.887-15.947-18.991-22.832-0.724-0.583-1.16-1.233-1.739-1.815-23.774-28.483-57.99-47.405-97.712-49.65-76.254-4.133-141.635 55.016-145.986 132.213-0.29 5.509-0.144 10.945 0.147 16.453 1.449 48.204 29.72 175.995 240.217 295.741v137.433c-75.096-179.548-267.038-193.538-267.038-193.538-13.626 301.977 189.188 356.556 267.038 366.415v2.174h46.537v-1.668c74.225-8.408 285.158-59.146 271.096-366.922z" p-id="6474" fill="currentColor"></path>
      </svg>
    </div>
  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: grid;
  padding: 30px;
  gap: 30px;
  place-content: center;
}

.container {
  min-width: 320px;
  max-width: 750px;
  border: 1px dotted #f36;
  overflow: hidden;
  resize: horizontal;
  border-radius: 4px;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  color: #333;
  background: linear-gradient(#f8f8f8, #fff);
  box-shadow: 0 8px 16px -8px rgb(0 0 0 / 40%);
  gap: 18px;
  font-size: 1.5rem;
  line-height: 1.5;
}

.card svg {
  width: 2em;
  height: 2em;
}

.card__media {
  --color: #c35f56;
  --background: #e26c63;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  padding: 10px;
  width: 4em;
  aspect-ratio: 1;
  border: 1px solid currentColor;
  color: var(--color);
  background-color: var(--background);
}

.card__action {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  width: 3em;
  aspect-ratio: 1;
  background-color: #57465f;
  color: #e79418;
  border-radius: 50%;
}

.card__action svg {
  width: 1.25em;
  height: 1.25em;
}

.card__title {
  flex: 1 1 0%;
}

.card--overflow-hidden .card__title {
  white-space: nowrap;
  overflow: hidden;
}

.card--overflow-wrap .card__title {
  overflow-wrap: break-word;
  min-width: 0;
  /*   hyphens: auto; */
}

.card--text-overflow .card__title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card--line-clamp .card__title {
  --line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: var(--line-clamp);
  -webkit-box-orient: vertical;
}