首页 文章

CSS换行，网页设计，Wordwrap，Css休息

提问于
浏览 次
1

有人可以帮助我解决这个问题，我有一个div结构，如：它用长字符串来确保它不会破坏CSS但是这个代码是...我尝试使用PRE和自动换行和PHP wordwrap（）函数...所有这些都给了我相同的重叠输出...我想要打破这么长的字符串，使它适合我的div并且所有的div都是均匀放置的......

css如下：.load {margin-left：40px;宽度：300像素;高度：30PX;字体大小：12像素; border-bottom：solid 1px #FFFFFF;} ............... HTML ...................

<div class="load" id="load">
        <span>
            dddddddddddddddddsssssssssssssssssssssss

ssssssssssssssssssssssssssssssssssssssss
ssssssssssssssssssssssss时间：

</span></div>

ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddd时间：
............许多这样的div

无法附加屏幕截图....但输出重叠DIV的...而且没有或没有文字的Div可以 .

php css word-wrap

2 回答

  • -1

    您可以尝试使用 word-wrap 属性，如以下演示中所示：

    http://jsfiddle.net/audetwebdesign/pTH6Y/

    自动换行仅适用于固定宽度的块级元素，在我的示例中使用类exactFit的 div .

    word-wrap 是一个CSS3属性，因此请仔细检查是否存在跨浏览器问题，可能需要使用供应商特定的前缀来使样式在更多浏览器中正常工作 .

    还有另一种方法依赖于 white-space 属性：

    white-space: pre;           /* CSS 2.0 */
white-space: pre-wrap;      /* CSS 2.1 */
white-space: pre-line;      /* CSS 3.0 */
white-space: -pre-wrap;     /* Opera 4-6 */
white-space: -o-pre-wrap;   /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap;  /* HP Printers */
word-wrap: break-word;      /* IE 5+ */

    你真正想要做的就是找到适用于所有流行平台的方法 .

    For reference: http://perishablepress.com/press/2010/06/01/wrapping-content/

    回复于
  • 4

    它有点难以打破一个词，即reaaaaaaaaaaaaaaaaaaaaaaaaly，你只能包装实际的句子 .

    你还应该设置div的样式来隐藏溢出，这就是我一直在做的事情，以防止你的模板出现故障：

    div{ overflow:hidden; }

    其他可能的值是：

    oveflow-y:hidden;
oveflow-x:hidden;
// auto -- scrolls when overflowwing
// scroll -- scroll bar always visible
    回复于

相关问题