html文字换行换到行内元素下面的办法

气乃本

于 2023-02-16 21:01:32 发布

阅读量283

点赞数

分类专栏： css&html技巧文章标签：前端 css html Powered by 金山文档

本文链接：https://blog.csdn.net/u013553807/article/details/129070926

版权

css&html技巧专栏收录该内容

7 篇文章 0 订阅

订阅专栏

当父元素宽度固定且包含行内元素时，文章介绍了一种方法来防止文字换行到其他元素下方。通过使用flex布局，并将`align-items`属性设置为`start`，可以确保文字与第一行元素对齐，保持布局整洁。

摘要由CSDN通过智能技术生成

当父元素有宽度,里面有行内元素,我们想让里面的文字换行的时候,文字换行会换到其他行内元素的下面.

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

  .box {
    margin: 50px auto;
    width: 200px;
    word-wrap: break-word;
    word-break: break-all;
  }

<body>
  <div class="box">
    <input type="checkbox" name="" id="">
    <span>asdsadasdssasadadsdsssadsadssa</span>
  </div>
</body>

效果如图:

此时我们并不希望文字换行到多选框下面,我们想让他和第一行文字对齐.

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

  .box {
    margin: 50px auto;
    width: 200px;
    word-wrap: break-word;
    word-break: break-all;
    display: flex;
    align-items: start;
  }

我们在box父元素使用flex布局,align-items属性设置为start就可以了