现在是：
想要实现：
牛场的名字，在右边显示
且超过宽度后，自动换行，在红色框内显示。
把：
<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布局的讨论 – 会编程的银猪 – 博客园
【总结】
然后改为：
.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让两段文字左右对齐以及右边超过宽度自动换行