<div>元素:如何在调整大小</div>时让我的div文本保持原样

时间:2014-04-25 04:35:21

标签: html css

我已经为我的问题创建了这个JSfiddle

当我们调整窗口大小时,在这个特殊的小提琴中,div元素会相应地改变自己。但我希望不会发生这种情况。使用{white-space: nowrap;}似乎不是一个好选择。很少的帮助将不胜感激。谢谢。

<body>
  <p>This is a paragraph with no specified margins. i am writing stuffs to just make things long so as to provide a better understanding of my question.</p>
  <p class="margin">This is a paragraph with specified margins. i am writing stuffs to just make things long so as to provide a better understanding of my question. Press the "restore down" button present before "close button" or resize the window. It will change it shape according to CSS. I want that not happen. it should appear as it is while restoring or resizing.</p>
  <p align="center"> In short i want a responsive "div" elements. </p>
</body>

我需要修复div元素,在调整大小时不应该改变自己。谢谢。

5 个答案:

答案 0 :(得分:0)

设置正文宽度修复以解决此问题,

body{
    margin-left: auto;
    margin-right: auto;
    width:400px;
}

检查此 demo jsFiddle

答案 1 :(得分:0)

不确定我是否理解正确,但有一个想法是嵌套一个固定宽度div(在这里完成宽度= 200px,根据需要更改),它将文本保存在主div /窗口内:

<div id="Resizable">
    <div id="TextHolder" style="width:200px">
        <p>Your text</p>
    </div>
</div>

答案 2 :(得分:0)

在您的情况下,您需要为p元素设置固定宽度。

p{
   width: 600px;
   margin-left:auto;
   margin-right:auto;
}

或者您只需将身体宽度设置为固定。例如

body{
  width: 600px;
  margin-left:auto;
  margin-right:auto;
}

答案 3 :(得分:0)

可以使用min-widthmax-width

body{
    margin-left: auto;
    margin-right: auto;
    min-width:400px;
    max-width:500px;
}

Fiddle

答案 4 :(得分:0)

您可以将身体宽度设置为上一个答案中所述的user1153551,或者您可以设置宽度或p元素......

p
{
background-color:yellow;
width:400px;
}

这是FIDDLE