时间戳

首页 > 解决方案 > 多行文本使 svg 缩小

css - 多行文本使 svg 缩小

问题描述

我正在尝试使用 svg + text 和 flexbox 创建行，但我遇到了一个问题。

当文本太长并占用 2 行时，svg 正在缩小。线条越多，越缩水

注意：svg 暂时是一个占位符

这是代码：

<div class="wrapper">

 <div class="container">
   <div class="svg"></div>
   <p>lorem</p>
 </div>

 <div class="container">
  <div class="svg"></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
 </div>

</div>

和CSS：

.wrapper {
  width: 800px;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  padding: 40px 12px;
 }

.container {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
 }

.svg {
  margin-right: 20px;
  height: 20px; 
  width: 20px; 
  background-color: #DEDEDE;
 }

 p {
  margin: 0;
 }

这是一个codepen，所以你可以看到我所说的“缩小”：https ://codepen.io/anon/pen/YdWyBM?editors=1100

有任何想法吗？

谢谢

标签： csshtmlsvgflexbox

解决方案

你的魔术是.svg {flex-shrink: 0;}。这就是您禁用 flex child 收缩的方式。

.wrapper {
  width: 800px;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  padding: 40px 12px;
}

.container {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

.svg {
  margin-right: 20px;
  height: 20px; 
  width: 20px; 
  background-color: #DEDEDE;
  flex-shrink: 0;
}

p {
  margin: 0;
}
<div class="wrapper">
  
  <div class="container">
    <div class="svg"></div>
    <p>lorem</p>
  </div>
  
  <div class="container">
    <div class="svg"></div>
    <p>lorem</p>
  </div>
  
  <div class="container">
    <div class="svg"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
  </div>
  
  <div class="container">
    <div class="svg"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris </p>
  </div>
  
</div>

推荐阅读