html 无需使用Flex即可处理不断增长的文本

u3r8eeie 于 2022-12-09 发布在其他

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

我遵循MSDN文档的外观，在一个能够扩展和收缩的框中显示文本。我使用flex实现了这一点，并且没有为任何div提供任何固定宽度。
下面是一个简单的工作解决方案。这里最里面的文本可以增长/收缩体和父div相应地调整。类似于文本1，文本2，我可以动态地有文本3，文本4等。图像和第一个文本是在一行，后续的文本将被放置在一个在另一个下面，这种行为是动态的
由于Flex的使用在IE的旧版本中不受支持，我如何才能使用css的旧样式实现相同的事情？我无法实现a）处理不断增长的文本b）处理文本项的数量（Text 1，Text 2，Text 3）而不使用Flex，因为我不想固定div的宽度c）解决方案应该是响应

工作溶液：

<!DOCTYPE html>
<html>

<div style="padding:19px 21px 17px;border:solid 1px #b3a188;background-color:#fff;">
  <span style="display:block;margin 0 244px 19px 0;font-family:Arial;font-size:18px;font-weight:bold;font-stretch:normal;font-style:normal;line-heightnormal;letter-spacing:normal;color:#b3a188;">Header1</span>
  <div style="display:flex;flex-flow:row nowrap;flex:1 0 auto;width:100%">
    <div style="background-color:#1175b5;border:1px solid #1175b5;border-left-width:2px;border-right-width:2px"></div>

    <div style="background-color:rgba(17,117,181,0.06);padding:16px 25px 20px;display:flex;flex:1;width:100%;box-sizing:border-box;justify-content:space-evenly;">
      <img src="test1.png" style="width:16px;height:16px;margin-right:12px;">

      <div style="display:flex;flex-flow:column nowrap;flex:1 0 auto;box-sizing:border-box;
    word-break:break-word;width:95%;">
        <div style="font-family:Arial;font-size:16px;font-weight:bold;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#231f20;width:100%;">
          Body1</div>
        <div style="margin :8px 0 8px 12px;font-family:Arial;font-family:Arial;font-size:14px;
    font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.43;
    letter-spacing:normal;color:#231f20;margin-left:0px;word-break:break-word;width:100%;">
          Random text to be displayed RandomRandom text to be displayed Random. This text can grow randomly
        </div>

        <div style="margin :8px 0 8px 12px;font-family:Arial;font-family:Arial;font-size:14px;
    font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.43;
    letter-spacing:normal;color:#231f20;margin-left:0px;word-break:break-word;width:100%;">
          Second line of display . This text can also grow in size . Similarly the parent divs should have the capability of expanding and shrinking according;y
        </div>
      </div>
    </div>
  </div>
</div>

</html>

Html

来源：https://stackoverflow.com/questions/74717271/capability-to-handle-growing-text-without-use-of-flex

2条答案

按热度按时间

jobtbby31#

Flex部分其实根本就不需要...它们没有任何用处。唯一使用FlexBox功能的是一个空的div来创建部分左侧的边框。我直接添加了边框。

<div style="padding:19px 21px 17px;border:solid 1px #b3a188;background-color:#fff;">
  <span style="display:block;margin 0 244px 19px 0;font-family:Arial;font-size:18px;font-weight:bold;font-stretch:normal;font-style:normal;line-heightnormal;letter-spacing:normal;color:#b3a188;">Header1</span>
  <div style="width:100%;border:1px solid #1175b5;border-width:0 0 0 4px;">

    <div style="background-color:rgba(17,117,181,0.06);padding:16px 25px 20px;width:100%;box-sizing:border-box;justify-content:space-evenly;">
      <img src="test1.png" style="width:16px;height:16px;margin-right:12px;">

      <div style="box-sizing:border-box;
    word-break:break-word;width:95%;">
        <div style="font-family:Arial;font-size:16px;font-weight:bold;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#231f20;width:100%;">
          Body1</div>
        <div style="margin :8px 0 8px 12px;font-family:Arial;font-family:Arial;font-size:14px;
    font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.43;
    letter-spacing:normal;color:#231f20;margin-left:0px;word-break:break-word;width:100%;">
          Random text to be displayed RandomRandom text to be displayed Random. This text can grow randomly
        </div>

        <div style="margin :8px 0 8px 12px;font-family:Arial;font-family:Arial;font-size:14px;
    font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.43;
    letter-spacing:normal;color:#231f20;margin-left:0px;word-break:break-word;width:100%;">
          Second line of display . This text can also grow in size . Similarly the parent divs should have the capability of expanding and shrinking according;y
        </div>
      </div>
    </div>
  </div>
</div>

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

e4eetjau2#

标题1

<div style="background-color:rgba(17,117,181,0.06);padding:16px 25px 20px;display:flex;flex:1;width:100%;box-sizing:border-box;justify-content:space-evenly;">
  <img src="test1.png" style="width:16px;height:16px;margin-right:12px;">

  <div style="display:flex;flex-flow:column nowrap;flex:1 0 auto;box-sizing:border-box;
word-break:break-word;width:95%;">
    <div style="font-family:Arial;font-size:16px;font-weight:bold;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#231f20;width:100%;">
      Body1</div>
    <div style="margin :8px 0 8px 12px;font-family:Arial;font-family:Arial;font-size:14px;
font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.43;
letter-spacing:normal;color:#231f20;margin-left:0px;word-break:break-word;width:100%;">
      Random text to be displayed RandomRandom text to be displayed Random. This text can grow randomly
    </div>

    <div style="margin :8px 0 8px 12px;font-family:Arial;font-family:Arial;font-size:14px;
font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.43;
letter-spacing:normal;color:#231f20;margin-left:0px;word-break:break-word;width:100%;">
      Second line of display . This text can also grow in size . Similarly the parent divs should have the capability of expanding and shrinking according;y
    </div>
  </div>
</div>

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

我来回答

html 无需使用Flex即可处理不断增长的文本

2条答案

相关问题

热门标签

最新问答