Question

我有一个包含动态文本的元素，我宁愿将其作为容器的30％，但如果内容由于长词而不允许，我不介意拉伸。

如果我在某些时候内联块宽度为30％，则某些文本会溢出容器，看起来很糟糕。

如果我有内联块宽度自动，文本永远不会溢出，但容器会随着文本的增长而不会破坏。

我想要一种“宽度包裹”为30％的方法，所以文字开始包裹在那里，但如果它不能包裹容器只是伸展到足够。

如果可以的话，我会喜欢100％的CSS答案。我对如何在Javascript中执行此操作有一些想法，但我希望尽可能避免这种情况。

我搞乱了display：table-cell但是搞砸了我的布局，因为我需要100％的高度，桌子不尊重它。

此处说明的问题： http://codepen.io/nicklepedde/pen/gLYgpw

HTML：

<div class="con">
  <div class="side">
  Sometimes this text is long
  </div>
  <p>This is filled with other content that sets the height some what dynamically</p>
   <p>This is filled with other content that sets the height some what dynamically</p>
   <p>This is filled with other content that sets the height some what dynamically</p>
   <p>This is filled with other content that sets the height some what dynamically</p>
   <p>This is filled with other content that sets the height some what dynamically</p>
   <p>This is filled with other content that sets the height some what dynamically</p>
   <p>This is filled with other content that sets the height some what dynamically</p>
  <p>This is filled with other content that sets the height some what dynamically</p>
  <p>This is filled with other content that sets the height some what dynamically</p>
  <p>This is filled with other content that sets the height some what dynamically</p>
  <p>This is filled with other content that sets the height some what dynamically</p>
  <p>This is filled with other content that sets the height some what dynamically</p>
  <p>This is filled with other content that sets the height some what dynamically</p>
  <p>This is filled with other content that sets the height some what dynamically</p>
</div>

CSS：

.con{position:relative;width:600px;background:orange}
.side{
  position:absolute;
  left:0;
  top:0;
  width:30%;
  height:100%;
  background:yellow;
  filter:opacity(.8);
  font-size:50px
}

更新使用的字体大小或实际文字不在我的控制之下，请不要太过于字面意思。我知道这个词太大了，这就是我在这里问的问题。不，我不能只改变字体大小，这不是我试图解决的问题的选项。

我更新了我的codepen以更接近地模拟我的最终产品： http://codepen.io/nicklepedde/pen/gLYgpw

Answer 1

您可以向左浮动元素并将宽度设置为您想要的百分比。只需确保设置一个全局的box-sizing：border-box，这样如果你设置了边距和填充，你的元素就不会向下移动。

<div class="side">
  Sometimes this text is long
  </div>
<div class="con">
  <p>This is filled with other content that sets the height some what dynamically</p>
   <p>This is filled with other content that sets the height some what dynamically</p>
   <p>This is filled with other content that sets the height some what dynamically</p>
   <p>This is filled with other content that sets the height some what dynamically</p>
   <p>This is filled with other content that sets the height some what dynamically</p>
   <p>This is filled with other content that sets the height some what dynamically</p>
   <p>This is filled with other content that sets the height some what dynamically</p>
  <p>This is filled with other content that sets the height some what dynamically</p>
  <p>This is filled with other content that sets the height some what dynamically</p>
  <p>This is filled with other content that sets the height some what dynamically</p>
  <p>This is filled with other content that sets the height some what dynamically</p>
  <p>This is filled with other content that sets the height some what dynamically</p>
  <p>This is filled with other content that sets the height some what dynamically</p>
  <p>This is filled with other content that sets the height some what dynamically</p>
</div>

http://username:password@<server>/ODATA_table

这是我对您的代码的编辑，希望它有所帮助。

http://codepen.io/ciammarino/pen/dObNQO

如果可以在不破坏单词的情况下将文本换行到一定宽度

1 个答案: