logo标签列表

CSS文本换行：第二行的文本

htmlcss
6
如何使文本在溢出第一行时“保持在自己的一侧”？
我有一个包含两个div的部分。 这两个div并排放置，但如果第一行已满，则会在第一个div下面开始新的一行。（这就是问题所在）
第一个div的宽度为120px，因为那里可以打印最宽的文本。 第二个div应该是屏幕的其余部分。
我创建了一个指向jafiddle的链接，以防页面上的链接不清楚。 当您拥有较小的窗口（手机等）时，问题发生。
页面是由php生成的。

http://jsfiddle.net/tL2fkLhq

.section{
        display: inline-block;
        width: 100%;
        float: left;
    }
    .pTrans1{
        float: left;
        width: 120px;
        color: red;

    }
    .pTrans2{
        display: inline;
        
    }
<section><div class='pTrans1'>15<font color='blue'>1120Z</font></div> <div class='pTrans2'><b>Meterologisk observation från den 15e kl 12:20 svensk tid.<font color=green> (32 minuter sedan)</font></b></div></section><br>

7个回答
4
您可以使用 display: table;。 演示 
.section{
   display: table;
}
.pTrans1{
   width: 120px;
   color: red;
   display: table-cell;
 }
.pTrans2 {
  display: table-cell;
}


<section>

    <div class='pTrans1'>15<font color='blue'>1120Z</font></div>
    <div class='pTrans2'><b>Meterologisk observation från den 15e kl 12:20 svensk tid.<font color=green> (32 minuter sedan)</font></b></div>

</section><br>
1

我已经做过一个类似的例子，想要分享给你。在这种情况下，你需要使用定位(positioning)。这是一个固定-流体(fixed-fluid)的案例:

+-------+-----------+
| FIXED | FLUUUUUID |
+-------+-----------+

或者

+-------+-----------+
| FIXED | FLUUUUUID |
|       | FLUUUUUID |
+-------+-----------+

固定-流体模型。在我的代码片段中，我展示了两种不同的例子。第一种情况下，流体大小较小。而下一个例子则有过长的内容。 代码片段 

.parent {position: relative; margin: 0 0 15px; border: 1px solid #999; padding: 5px; padding-left: 100px;}
.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;}
.parent .fluid {background-color: #f99;}
<div class="parent">
  <div class="fixed">Fixed</div>
  <div class="fluid">Fluid</div>
</div>

<div class="parent">
  <div class="fixed">Fixed</div>
  <div class="fluid">Fluid Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque animi placeat, expedita tempora explicabo facilis nulla fuga recusandae officia, maiores porro eaque, dolore et modi in sapiente accusamus id aut.</div>
</div>

1
在这里使用“position: absolute”有点夸张，我觉得。 - KittMedia
@KittMedia 情况迫使这样做。 :) 固定-流体布局。或者你需要使用表格 hack，因为它比那更好。 - Praveen Kumar Purushothaman
不，正如您所看到的，只需对给定代码进行2个小更改就可以得到至少2个答案。 :) - KittMedia
@KittMedia 是的，我能看到。 :) 当我开始进行网页开发时，我也使用了那段代码，后来发现表格不适合布局。无论是 <table> 还是 display: table，都不能使用表格进行布局。 - Praveen Kumar Purushothaman
1
使用具有margin-left的块元素.pTrans2：
.section{
    display: inline-block;
    width: 100%;
    float: left;
}
.pTrans1{
    float: left;
    width: 120px;
    color: red;

}
.pTrans2 {
    display: block;
    margin-left: 120px; 
}

演示：JSFiddle

1
你可以这样做：
CSS
.section {
  display: block;
  width: 100%;
}

.pTrans1 {
  float: left;
  width: 120px;
  color: red;
}

.pTrans2 {
  display: block;
  margin-left: 120px;
}

这里演示

@Andreas，经验是我亲爱的朋友 ;) - Luís P. A.
1
只需在 .pTrans2 中使用 display: table-cell;，而不是 display: inline;。
.pTrans2{
    display: table-cell;
}

更新的 Fiddle

.section{
    display: inline-block;
    width: 100%;
    float: left;
}
.pTrans1{
   float: left;
   width: 120px;
   color: red;

}
.pTrans2{
    display: table-cell;
      
}
<section>
    <div class='pTrans1'>15<font color='blue'>1120Z</font></div>
    <div class='pTrans2'><b>Meterologisk observation från den 15e kl 12:20 svensk tid.<font color=green> (32 minuter sedan)</font></b></div>
</section><br>

1
将第二个 div 改为如下所示。
.pTrans2{
        width: calc(100% - 120px);
        margin-left: 120px;
}
1

我更喜欢使用新的flex-box规范，而不是使用display: table。这只是我的个人偏好，但我对CSS表格系统有着深深的厌恶，因为它总是以我不想要的方式行事。

所以，为了复制Nenad Vracar的答案并进行轻微修改：

您可以使用display: flex;

演示

section{
   display: flex;
}
.pTrans1{
   width: 120px;
   color: red;
 }
.pTrans2 {
  flex: 1;
}


<section>

    <div class='pTrans1'>15<font color='blue'>1120Z</font></div>
    <div class='pTrans2'><b>Meterologisk observation från den 15e kl 12:20 svensk tid.<font color=green> (32 minuter sedan)</font></b></div>

</section>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接