最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】如何设置css让两段文字左右对齐以及右边超过宽度自动换行

CSS crifan 4022浏览 0评论

现在是:

想要实现:

牛场的名字,在右边显示

且超过宽度后,自动换行,在红色框内显示。

把:

              <h2>当前农场:{currentCowfarmStr}</h2>

改为:

              <h2>
                <p class={style.current_farm}>当前农场:</p>
                <p class={style.farm_name}>{currentCowfarmStr}</p>
              </h2>

但是css不知道如何设置。

随便去试了试:

.current_farm{
  // position: relative;
  // float:left;
  // display: inline-block;
}
.farm_name {
  // position: relative;
  // float: right;
  // display: inline-block;
}

css 左右布局 p

实现两列等宽布局的几种方法_CSS, Layout, 布局 教程_w3cplus

CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼 – honoka – 博客园

从三栏自适应宽度布局到css布局的讨论 – 会编程的银猪 – 博客园

DIV+CSS页面基本布局总结 – 简书

【总结】

然后改为:

.profile_label {
  float:left;
  width: 28%;
}
.profile_value {
  float: left;
  width: 72%;
}

和:

              <h2>
                <p class={style.profile_label}>用户名:</p>
                <p class={style.profile_value}>{this.state.userInfo.empnames}</p>
              </h2>
              <h2>
                <p class={style.profile_label}>用户类型:</p>
                <p class={style.profile_value}>{userTypeStr}</p>
              </h2>
              <h2>
                <p class={style.profile_label}>当前农场:</p>
                <p class={style.profile_value}>{currentCowfarmStr}</p>
              </h2>

即可到达基本要的效果:

但是又需要去解决:

【已解决】css中如何根据子元素的高度自动调整父元素的高度

转载请注明:在路上 » 【已解决】如何设置css让两段文字左右对齐以及右边超过宽度自动换行

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.169 seconds, using 22.11MB memory