html 使文本适合列圆角div

4smxwvx5 于 2022-12-09 发布在其他

关注(0)|答案(2)|浏览(136)

我正在使用Bootstrap 5并将一行分成两列。我想为左边的列使用圆形边框，但我需要内容留在div内。
代码如下：

<div class="row">
        <div class="col-6 rounded-pill border encabezado-clinica">
            <div class="col-md-12 p-2">
                <h2>{{clinic.name}}</h2>
                <h5><img src="{% static 'img/icons/hospital.svg' %}">{{clinic.get_speciality_display}}</h5>
                <h5><img src="{% static 'img/icons/geo-alt.svg' %}">{{clinic.full_address}}</h5>
                <h5><img src="{% static 'img/icons/train-front.svg' %}">{{clinic.train_access}}</h5>
                <h5><img src="{% static 'img/icons/bus-front.svg' %}">{{clinic.bus_access}}</h5>
                <h5><img src="{% static 'img/icons/p-square.svg' %}">{{clinic.parking}}</h5>
                <h5><img src="{% static 'img/icons/telephone.svg' %}">{{clinic.phone_number}}</h5>
            </div>
        </div>

而此刻自定义类css：

.encabezado-clinica {
    shape-outside: margin-box;
}

Here is the result now.
我尝试在不退出的情况下更改overflow和shape-outside css属性。我需要渲染的文本保持在div内，然后才能调整填充。有什么想法吗？

Html

来源：https://stackoverflow.com/questions/74711068/make-text-fit-inside-a-column-rounded-div

2条答案

按热度按时间

tyky79it1#

这里是你的html代码，修改很少。

<div class="row mx-0">
      <div class="col-6 encabezado-clinica">
        <div class="py-5">
          <h2>{{clinic.name}}</h2>
          <h5>
            <img
              src="{% static 'img/icons/hospital.svg' %}"
            />{{clinic.get_speciality_display}}
          </h5>
          <h5>
            <img
              src="{% static 'img/icons/geo-alt.svg' %}"
            />{{clinic.full_address}}
          </h5>
          <h5>
            <img
              src="{% static 'img/icons/train-front.svg' %}"
            />{{clinic.train_access}}
          </h5>
          <h5>
            <img
              src="{% static 'img/icons/bus-front.svg' %}"
            />{{clinic.bus_access}}
          </h5>
          <h5>
            <img
              src="{% static 'img/icons/p-square.svg' %}"
            />{{clinic.parking}}
          </h5>
          <h5>
            <img
              src="{% static 'img/icons/telephone.svg' %}"
            />{{clinic.phone_number}}
          </h5>
        </div>
      </div>
 </div>

就像这样写你的CSS

.encabezado-clinica {
        border: 1px solid gray;
        border-radius: 50%;
        display: flex;
        justify-content: center;
 }

赞(0）回复(0）举报 2022-12-09

jyztefdp2#

您必须将以下内容添加到radius容器：text-align: center; min-width: max-content; padding: 20px 0; .
试试看：
第一个

赞(0）回复(0）举报 2022-12-09

我来回答

html 使文本适合列圆角div

2条答案

相关问题

热门标签

最新问答