logo标签列表

CSS如何使文字环绕图片排列

htmlcss
5

当我的文本较小时，它会正确显示。但当文本更多时，它将溢出到左侧，破坏其外观。

我该如何隐藏冗长的文本？或者让它分成两行（不允许三行）？

输入图像描述 我已经尝试过：

<div style="width: 300px;padding: 0;align-items: center;border-radius: 2px;line-height: 16px;cursor: pointer;border: 1px solid;border-color: #bed9b2;">

<svg style="padding: 6px;height: 28px;width: auto;background-color: #bed9b2;border-right: 1px solid #bed9b2;vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" width="20.222" height="28" preserveAspectRatio="none" xmlns:v="https://vecta.io/nano"><defs><linearGradient gradientUnits="userSpaceOnUse" id="A" x1="21.75" x2="21.75" y1="8.73" y2="16.501"><stop stop-color="#1a237e" stop-opacity=".2" offset="0%"></stop><stop stop-color="#1a237e" stop-opacity=".02" offset="100%"></stop></linearGradient><radialGradient gradientUnits="userSpaceOnUse" id="B" cx=".969" cy=".832" r="49.332" fx=".969" fy=".832" gradientTransform="scale(0.84983659,1.1766968)"><stop stop-color="#fff" offset="0%"></stop><stop stop-color="#fff" stop-opacity="0" offset="100%"></stop></radialGradient></defs><g transform="matrix(.777778 0 0 .777778 -5.444444 -1.555556)" fill-rule="evenodd"><path d="M9.5 2H24l9 9v24.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 7 35.5v-31A2.5 2.5 0 0 1 9.5 2z" fill="#0f9d58"></path><path d="M7 35a2.5 2.5 0 0 0 2.5 2.5h21A2.5 2.5 0 0 0 33 35v.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 7 35.5z" fill="#263238" fill-opacity=".1"></path><path d="M9.5 2H24v.5H9.5A2.5 2.5 0 0 0 7 5v-.5A2.5 2.5 0 0 1 9.5 2z" fill="#fff" fill-opacity=".2"></path><path d="M17.5 8l8.5 8.5V9" transform="translate(7 2)" fill="url(#A)" fill-rule="nonzero"></path><path d="M24 2l9 9h-6.5A2.5 2.5 0 0 1 24 8.5z" fill="#87ceac"></path><path d="M13 18h14v14H13zm2 2v2h4v-2zm0 4v2h4v-2zm0 4v2h4v-2zm6-8v2h4v-2zm0 4v2h4v-2zm0 4v2h4v-2z" fill="#f1f1f1"></path><path d="M2.5 0H17l9 9v24.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 0 33.5v-31A2.5 2.5 0 0 1 2.5 0z" transform="translate(7 2)" fill="url(#B)" fill-opacity=".1"></path></g></svg>

                            <span id="title" style="color:#508ef5;"><a style="text-decoration:none;padding-left: 10px;" target="_blank" href="https://docs.google.com/spreadsheets/d/1ukq2PWMyURzNH1bzCwKosPcBfdjPejVi4YzgAykd5YA/edit">Google Spreadsheet</a></span>
</div>


<b>Incorrect</b>


<div style="width: 300px;padding: 0;align-items: center;border-radius: 2px;line-height: 16px;cursor: pointer;border: 1px solid;border-color: #bed9b2;">

<svg style="padding: 6px;height: 28px;width: auto;background-color: #bed9b2;border-right: 1px solid #bed9b2;vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" width="20.222" height="28" preserveAspectRatio="none" xmlns:v="https://vecta.io/nano"><defs><linearGradient gradientUnits="userSpaceOnUse" id="A" x1="21.75" x2="21.75" y1="8.73" y2="16.501"><stop stop-color="#1a237e" stop-opacity=".2" offset="0%"></stop><stop stop-color="#1a237e" stop-opacity=".02" offset="100%"></stop></linearGradient><radialGradient gradientUnits="userSpaceOnUse" id="B" cx=".969" cy=".832" r="49.332" fx=".969" fy=".832" gradientTransform="scale(0.84983659,1.1766968)"><stop stop-color="#fff" offset="0%"></stop><stop stop-color="#fff" stop-opacity="0" offset="100%"></stop></radialGradient></defs><g transform="matrix(.777778 0 0 .777778 -5.444444 -1.555556)" fill-rule="evenodd"><path d="M9.5 2H24l9 9v24.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 7 35.5v-31A2.5 2.5 0 0 1 9.5 2z" fill="#0f9d58"></path><path d="M7 35a2.5 2.5 0 0 0 2.5 2.5h21A2.5 2.5 0 0 0 33 35v.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 7 35.5z" fill="#263238" fill-opacity=".1"></path><path d="M9.5 2H24v.5H9.5A2.5 2.5 0 0 0 7 5v-.5A2.5 2.5 0 0 1 9.5 2z" fill="#fff" fill-opacity=".2"></path><path d="M17.5 8l8.5 8.5V9" transform="translate(7 2)" fill="url(#A)" fill-rule="nonzero"></path><path d="M24 2l9 9h-6.5A2.5 2.5 0 0 1 24 8.5z" fill="#87ceac"></path><path d="M13 18h14v14H13zm2 2v2h4v-2zm0 4v2h4v-2zm0 4v2h4v-2zm6-8v2h4v-2zm0 4v2h4v-2zm0 4v2h4v-2z" fill="#f1f1f1"></path><path d="M2.5 0H17l9 9v24.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 0 33.5v-31A2.5 2.5 0 0 1 2.5 0z" transform="translate(7 2)" fill="url(#B)" fill-opacity=".1"></path></g></svg>

                            <span id="title" style="color:#508ef5;"><a style="text-decoration:none;padding-left: 10px;" target="_blank" href="https://docs.google.com/spreadsheets/d/1ukq2PWMyURzNH1bzCwKosPcBfdjPejVi4YzgAykd5YA/edit">Americas English Language Proficiency Test - AELPT</a></span>
</div>

你可以尝试使用inline-flex。这里有一篇文章：https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4 - Ozgur Sar
2个回答
2
今日免费次数已满, 请开通会员/明日再来 

svg {
  margin-right: 1em;
  flex-shrink: 0;
}

div[style] {
  margin: 1em;
  display: flex;
  align-items: center;
  ;
}

a.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

span {
  flex: 1;
  min-width: 0
}

a.ellipsis {
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
}
<b><del>In</del>correct</b>


<div style="width: 300px;padding: 0;align-items: center;border-radius: 2px;line-height: 16px;cursor: pointer;border: 1px solid;border-color: #bed9b2;">

  <svg style="padding: 6px;height: 28px;width: auto;background-color: #bed9b2;border-right: 1px solid #bed9b2;vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" width="20.222" height="28" preserveAspectRatio="none" xmlns:v="https://vecta.io/nano"><defs><linearGradient gradientUnits="userSpaceOnUse" id="A" x1="21.75" x2="21.75" y1="8.73" y2="16.501"><stop stop-color="#1a237e" stop-opacity=".2" offset="0%"></stop><stop stop-color="#1a237e" stop-opacity=".02" offset="100%"></stop></linearGradient><radialGradient gradientUnits="userSpaceOnUse" id="B" cx=".969" cy=".832" r="49.332" fx=".969" fy=".832" gradientTransform="scale(0.84983659,1.1766968)"><stop stop-color="#fff" offset="0%"></stop><stop stop-color="#fff" stop-opacity="0" offset="100%"></stop></radialGradient></defs><g transform="matrix(.777778 0 0 .777778 -5.444444 -1.555556)" fill-rule="evenodd"><path d="M9.5 2H24l9 9v24.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 7 35.5v-31A2.5 2.5 0 0 1 9.5 2z" fill="#0f9d58"></path><path d="M7 35a2.5 2.5 0 0 0 2.5 2.5h21A2.5 2.5 0 0 0 33 35v.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 7 35.5z" fill="#263238" fill-opacity=".1"></path><path d="M9.5 2H24v.5H9.5A2.5 2.5 0 0 0 7 5v-.5A2.5 2.5 0 0 1 9.5 2z" fill="#fff" fill-opacity=".2"></path><path d="M17.5 8l8.5 8.5V9" transform="translate(7 2)" fill="url(#A)" fill-rule="nonzero"></path><path d="M24 2l9 9h-6.5A2.5 2.5 0 0 1 24 8.5z" fill="#87ceac"></path><path d="M13 18h14v14H13zm2 2v2h4v-2zm0 4v2h4v-2zm0 4v2h4v-2zm6-8v2h4v-2zm0 4v2h4v-2zm0 4v2h4v-2z" fill="#f1f1f1"></path><path d="M2.5 0H17l9 9v24.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 0 33.5v-31A2.5 2.5 0 0 1 2.5 0z" transform="translate(7 2)" fill="url(#B)" fill-opacity=".1"></path></g></svg>

  <span id="title" style="color:#508ef5;"><a style="text-decoration:none;padding-left: 10px;" target="_blank" href="">Americas English Language Proficiency Test - AELPT</a></span>
</div>

<div style="width: 300px;padding: 0;align-items: center;border-radius: 2px;line-height: 16px;cursor: pointer;border: 1px solid;border-color: #bed9b2;">

  <svg style="padding: 6px;height: 28px;width: auto;background-color: #bed9b2;border-right: 1px solid #bed9b2;vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" width="20.222" height="28" preserveAspectRatio="none" xmlns:v="https://vecta.io/nano"><defs><linearGradient gradientUnits="userSpaceOnUse" id="A" x1="21.75" x2="21.75" y1="8.73" y2="16.501"><stop stop-color="#1a237e" stop-opacity=".2" offset="0%"></stop><stop stop-color="#1a237e" stop-opacity=".02" offset="100%"></stop></linearGradient><radialGradient gradientUnits="userSpaceOnUse" id="B" cx=".969" cy=".832" r="49.332" fx=".969" fy=".832" gradientTransform="scale(0.84983659,1.1766968)"><stop stop-color="#fff" offset="0%"></stop><stop stop-color="#fff" stop-opacity="0" offset="100%"></stop></radialGradient></defs><g transform="matrix(.777778 0 0 .777778 -5.444444 -1.555556)" fill-rule="evenodd"><path d="M9.5 2H24l9 9v24.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 7 35.5v-31A2.5 2.5 0 0 1 9.5 2z" fill="#0f9d58"></path><path d="M7 35a2.5 2.5 0 0 0 2.5 2.5h21A2.5 2.5 0 0 0 33 35v.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 7 35.5z" fill="#263238" fill-opacity=".1"></path><path d="M9.5 2H24v.5H9.5A2.5 2.5 0 0 0 7 5v-.5A2.5 2.5 0 0 1 9.5 2z" fill="#fff" fill-opacity=".2"></path><path d="M17.5 8l8.5 8.5V9" transform="translate(7 2)" fill="url(#A)" fill-rule="nonzero"></path><path d="M24 2l9 9h-6.5A2.5 2.5 0 0 1 24 8.5z" fill="#87ceac"></path><path d="M13 18h14v14H13zm2 2v2h4v-2zm0 4v2h4v-2zm0 4v2h4v-2zm6-8v2h4v-2zm0 4v2h4v-2zm0 4v2h4v-2z" fill="#f1f1f1"></path><path d="M2.5 0H17l9 9v24.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 0 33.5v-31A2.5 2.5 0 0 1 2.5 0z" transform="translate(7 2)" fill="url(#B)" fill-opacity=".1"></path></g></svg>

  <span id="title" style="color:#508ef5;"><a style="text-decoration:none;padding-left: 10px;" target="_blank" href=" " class="line-clamp">Line clamp Line clamp Line clamp Line clamp Line clamp Line clamp Line clamp </a></span>
</div>

<div style="width: 300px;padding: 0;align-items: center;border-radius: 2px;line-height: 16px;cursor: pointer;border: 1px solid;border-color: #bed9b2;">

  <svg style="padding: 6px;height: 28px;width: auto;background-color: #bed9b2;border-right: 1px solid #bed9b2;vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" width="20.222" height="28" preserveAspectRatio="none" xmlns:v="https://vecta.io/nano"><defs><linearGradient gradientUnits="userSpaceOnUse" id="A" x1="21.75" x2="21.75" y1="8.73" y2="16.501"><stop stop-color="#1a237e" stop-opacity=".2" offset="0%"></stop><stop stop-color="#1a237e" stop-opacity=".02" offset="100%"></stop></linearGradient><radialGradient gradientUnits="userSpaceOnUse" id="B" cx=".969" cy=".832" r="49.332" fx=".969" fy=".832" gradientTransform="scale(0.84983659,1.1766968)"><stop stop-color="#fff" offset="0%"></stop><stop stop-color="#fff" stop-opacity="0" offset="100%"></stop></radialGradient></defs><g transform="matrix(.777778 0 0 .777778 -5.444444 -1.555556)" fill-rule="evenodd"><path d="M9.5 2H24l9 9v24.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 7 35.5v-31A2.5 2.5 0 0 1 9.5 2z" fill="#0f9d58"></path><path d="M7 35a2.5 2.5 0 0 0 2.5 2.5h21A2.5 2.5 0 0 0 33 35v.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 7 35.5z" fill="#263238" fill-opacity=".1"></path><path d="M9.5 2H24v.5H9.5A2.5 2.5 0 0 0 7 5v-.5A2.5 2.5 0 0 1 9.5 2z" fill="#fff" fill-opacity=".2"></path><path d="M17.5 8l8.5 8.5V9" transform="translate(7 2)" fill="url(#A)" fill-rule="nonzero"></path><path d="M24 2l9 9h-6.5A2.5 2.5 0 0 1 24 8.5z" fill="#87ceac"></path><path d="M13 18h14v14H13zm2 2v2h4v-2zm0 4v2h4v-2zm0 4v2h4v-2zm6-8v2h4v-2zm0 4v2h4v-2zm0 4v2h4v-2z" fill="#f1f1f1"></path><path d="M2.5 0H17l9 9v24.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 0 33.5v-31A2.5 2.5 0 0 1 2.5 0z" transform="translate(7 2)" fill="url(#B)" fill-opacity=".1"></path></g></svg>

  <span id="title" style="color:#508ef5;"><a style="text-decoration:none;padding-left: 10px;" target="_blank" href=" " class="ellipsis">text ellipsis text ellipsis text ellipsis text ellipsistext ellipsis text ellipsis</a></span>
</div>
<div style="width: 300px;padding: 0;align-items: center;border-radius: 2px;line-height: 16px;cursor: pointer;border: 1px solid;border-color: #bed9b2;">

  <svg style="padding: 6px;height: 28px;width: auto;background-color: #bed9b2;border-right: 1px solid #bed9b2;vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" width="20.222" height="28" preserveAspectRatio="none" xmlns:v="https://vecta.io/nano"><defs><linearGradient gradientUnits="userSpaceOnUse" id="A" x1="21.75" x2="21.75" y1="8.73" y2="16.501"><stop stop-color="#1a237e" stop-opacity=".2" offset="0%"></stop><stop stop-color="#1a237e" stop-opacity=".02" offset="100%"></stop></linearGradient><radialGradient gradientUnits="userSpaceOnUse" id="B" cx=".969" cy=".832" r="49.332" fx=".969" fy=".832" gradientTransform="scale(0.84983659,1.1766968)"><stop stop-color="#fff" offset="0%"></stop><stop stop-color="#fff" stop-opacity="0" offset="100%"></stop></radialGradient></defs><g transform="matrix(.777778 0 0 .777778 -5.444444 -1.555556)" fill-rule="evenodd"><path d="M9.5 2H24l9 9v24.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 7 35.5v-31A2.5 2.5 0 0 1 9.5 2z" fill="#0f9d58"></path><path d="M7 35a2.5 2.5 0 0 0 2.5 2.5h21A2.5 2.5 0 0 0 33 35v.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 7 35.5z" fill="#263238" fill-opacity=".1"></path><path d="M9.5 2H24v.5H9.5A2.5 2.5 0 0 0 7 5v-.5A2.5 2.5 0 0 1 9.5 2z" fill="#fff" fill-opacity=".2"></path><path d="M17.5 8l8.5 8.5V9" transform="translate(7 2)" fill="url(#A)" fill-rule="nonzero"></path><path d="M24 2l9 9h-6.5A2.5 2.5 0 0 1 24 8.5z" fill="#87ceac"></path><path d="M13 18h14v14H13zm2 2v2h4v-2zm0 4v2h4v-2zm0 4v2h4v-2zm6-8v2h4v-2zm0 4v2h4v-2zm0 4v2h4v-2z" fill="#f1f1f1"></path><path d="M2.5 0H17l9 9v24.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 0 33.5v-31A2.5 2.5 0 0 1 2.5 0z" transform="translate(7 2)" fill="url(#B)" fill-opacity=".1"></path></g></svg>  It can also be unwrapped text , it will be wrapped in a virtual container aside the other tag.
</div>

<div style="width: 300px;padding: 0;align-items: center;border-radius: 2px;line-height: 16px;cursor: pointer;border: 1px solid;border-color: #bed9b2;">
  A single tag among text inside a flex container will split in 3 columns.
  <svg style="padding: 6px;height: 28px;width: auto;background-color: #bed9b2;border-right: 1px solid #bed9b2;vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" width="20.222" height="28" preserveAspectRatio="none" xmlns:v="https://vecta.io/nano"><defs><linearGradient gradientUnits="userSpaceOnUse" id="A" x1="21.75" x2="21.75" y1="8.73" y2="16.501"><stop stop-color="#1a237e" stop-opacity=".2" offset="0%"></stop><stop stop-color="#1a237e" stop-opacity=".02" offset="100%"></stop></linearGradient><radialGradient gradientUnits="userSpaceOnUse" id="B" cx=".969" cy=".832" r="49.332" fx=".969" fy=".832" gradientTransform="scale(0.84983659,1.1766968)"><stop stop-color="#fff" offset="0%"></stop><stop stop-color="#fff" stop-opacity="0" offset="100%"></stop></radialGradient></defs><g transform="matrix(.777778 0 0 .777778 -5.444444 -1.555556)" fill-rule="evenodd"><path d="M9.5 2H24l9 9v24.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 7 35.5v-31A2.5 2.5 0 0 1 9.5 2z" fill="#0f9d58"></path><path d="M7 35a2.5 2.5 0 0 0 2.5 2.5h21A2.5 2.5 0 0 0 33 35v.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 7 35.5z" fill="#263238" fill-opacity=".1"></path><path d="M9.5 2H24v.5H9.5A2.5 2.5 0 0 0 7 5v-.5A2.5 2.5 0 0 1 9.5 2z" fill="#fff" fill-opacity=".2"></path><path d="M17.5 8l8.5 8.5V9" transform="translate(7 2)" fill="url(#A)" fill-rule="nonzero"></path><path d="M24 2l9 9h-6.5A2.5 2.5 0 0 1 24 8.5z" fill="#87ceac"></path><path d="M13 18h14v14H13zm2 2v2h4v-2zm0 4v2h4v-2zm0 4v2h4v-2zm6-8v2h4v-2zm0 4v2h4v-2zm0 4v2h4v-2z" fill="#f1f1f1"></path><path d="M2.5 0H17l9 9v24.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 0 33.5v-31A2.5 2.5 0 0 1 2.5 0z" transform="translate(7 2)" fill="url(#B)" fill-opacity=".1"></path></g></svg>  It can also be unwrapped text , it will be wrapped in a virtual container aside the other tag.
</div>

太好了，如果需要，我该如何隐藏多余的文本？ - Code Guy
max-height等于SVG高度并且overflow:hidden？ - G-Cyrillus
字符数超限...请显示省略号 - Code Guy
你可以看一下 -webkit-line-clamp。更新了链接的代码段。https://css-tricks.com/almanac/properties/l/line-clamp/ 对于单行，text-overflow / text-ellipsis 可能是你需要的东西 :) - G-Cyrillus
1

你会喜欢这个决定吗？它使用了 text-overflow: ellipsis 规则和换行符 - white-space: nowrap。在悬停时（使用 :hover 伪类），该块会展开完整的文本。

div span a {
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 80%;
    padding-right: 10px;
}

div:hover {
    width: fit-content!important;
    min-width: 300px;
}

div:hover span a {
    width: auto;
}
<div style="width: 300px;padding: 0;align-items: center;border-radius: 2px;line-height: 16px;cursor: pointer;border: 1px solid;border-color: #bed9b2;">

<svg style="padding: 6px;height: 28px;width: auto;background-color: #bed9b2;border-right: 1px solid #bed9b2;vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" width="20.222" height="28" preserveAspectRatio="none" xmlns:v="https://vecta.io/nano"><defs><linearGradient gradientUnits="userSpaceOnUse" id="A" x1="21.75" x2="21.75" y1="8.73" y2="16.501"><stop stop-color="#1a237e" stop-opacity=".2" offset="0%"></stop><stop stop-color="#1a237e" stop-opacity=".02" offset="100%"></stop></linearGradient><radialGradient gradientUnits="userSpaceOnUse" id="B" cx=".969" cy=".832" r="49.332" fx=".969" fy=".832" gradientTransform="scale(0.84983659,1.1766968)"><stop stop-color="#fff" offset="0%"></stop><stop stop-color="#fff" stop-opacity="0" offset="100%"></stop></radialGradient></defs><g transform="matrix(.777778 0 0 .777778 -5.444444 -1.555556)" fill-rule="evenodd"><path d="M9.5 2H24l9 9v24.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 7 35.5v-31A2.5 2.5 0 0 1 9.5 2z" fill="#0f9d58"></path><path d="M7 35a2.5 2.5 0 0 0 2.5 2.5h21A2.5 2.5 0 0 0 33 35v.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 7 35.5z" fill="#263238" fill-opacity=".1"></path><path d="M9.5 2H24v.5H9.5A2.5 2.5 0 0 0 7 5v-.5A2.5 2.5 0 0 1 9.5 2z" fill="#fff" fill-opacity=".2"></path><path d="M17.5 8l8.5 8.5V9" transform="translate(7 2)" fill="url(#A)" fill-rule="nonzero"></path><path d="M24 2l9 9h-6.5A2.5 2.5 0 0 1 24 8.5z" fill="#87ceac"></path><path d="M13 18h14v14H13zm2 2v2h4v-2zm0 4v2h4v-2zm0 4v2h4v-2zm6-8v2h4v-2zm0 4v2h4v-2zm0 4v2h4v-2z" fill="#f1f1f1"></path><path d="M2.5 0H17l9 9v24.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 0 33.5v-31A2.5 2.5 0 0 1 2.5 0z" transform="translate(7 2)" fill="url(#B)" fill-opacity=".1"></path></g></svg>

                            <span id="title" style="color:#508ef5;"><a style="text-decoration:none;padding-left: 10px;" target="_blank" href="https://docs.google.com/spreadsheets/d/1ukq2PWMyURzNH1bzCwKosPcBfdjPejVi4YzgAykd5YA/edit">Google Spreadsheet</a></span>
</div>


<b>Incorrect</b>


<div style="width: 300px;padding: 0;align-items: center;border-radius: 2px;line-height: 16px;cursor: pointer;border: 1px solid;border-color: #bed9b2;">

<svg style="padding: 6px;height: 28px;width: auto;background-color: #bed9b2;border-right: 1px solid #bed9b2;vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" width="20.222" height="28" preserveAspectRatio="none" xmlns:v="https://vecta.io/nano"><defs><linearGradient gradientUnits="userSpaceOnUse" id="A" x1="21.75" x2="21.75" y1="8.73" y2="16.501"><stop stop-color="#1a237e" stop-opacity=".2" offset="0%"></stop><stop stop-color="#1a237e" stop-opacity=".02" offset="100%"></stop></linearGradient><radialGradient gradientUnits="userSpaceOnUse" id="B" cx=".969" cy=".832" r="49.332" fx=".969" fy=".832" gradientTransform="scale(0.84983659,1.1766968)"><stop stop-color="#fff" offset="0%"></stop><stop stop-color="#fff" stop-opacity="0" offset="100%"></stop></radialGradient></defs><g transform="matrix(.777778 0 0 .777778 -5.444444 -1.555556)" fill-rule="evenodd"><path d="M9.5 2H24l9 9v24.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 7 35.5v-31A2.5 2.5 0 0 1 9.5 2z" fill="#0f9d58"></path><path d="M7 35a2.5 2.5 0 0 0 2.5 2.5h21A2.5 2.5 0 0 0 33 35v.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 7 35.5z" fill="#263238" fill-opacity=".1"></path><path d="M9.5 2H24v.5H9.5A2.5 2.5 0 0 0 7 5v-.5A2.5 2.5 0 0 1 9.5 2z" fill="#fff" fill-opacity=".2"></path><path d="M17.5 8l8.5 8.5V9" transform="translate(7 2)" fill="url(#A)" fill-rule="nonzero"></path><path d="M24 2l9 9h-6.5A2.5 2.5 0 0 1 24 8.5z" fill="#87ceac"></path><path d="M13 18h14v14H13zm2 2v2h4v-2zm0 4v2h4v-2zm0 4v2h4v-2zm6-8v2h4v-2zm0 4v2h4v-2zm0 4v2h4v-2z" fill="#f1f1f1"></path><path d="M2.5 0H17l9 9v24.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 0 33.5v-31A2.5 2.5 0 0 1 2.5 0z" transform="translate(7 2)" fill="url(#B)" fill-opacity=".1"></path></g></svg>

                            <span id="title" style="color:#508ef5;"><a style="text-decoration:none;padding-left: 10px;" target="_blank" href="https://docs.google.com/spreadsheets/d/1ukq2PWMyURzNH1bzCwKosPcBfdjPejVi4YzgAykd5YA/edit">Americas English Language Proficiency Test - AELPT</a></span>
</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接