Question

到目前为止，这是我的代码：

<div style="width:100px;height:100px;background:red">
            ssssssssssssssssssssssssssssssssssssss
</div>

然而，

word-wrap:break-word;
word-break:break-all;

并不是很有用，因为它无法在Firefox上进行自动换行。 我可以使用CSS 做什么？

Answer 1

white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
width:200px;

上面的代码非常适合我

Answer 2

一起使用以下规则：

/* For Firefox */
white-space: pre-wrap;
word-break: break-all;

/* For Chrome and IE */
word-wrap: break-word;

Answer 3

您必须在div上应用以下css类：

.content-div{
    word-break:break-all;
    word-wrap: break-word;
}

在表格中添加以下样式，在div中绑定

style='table-layout:fixed;width:306px;'

它适用于IE7，FF 3.6和Chrome。

Answer 4

使用宽度和显示属性以及自动换行属性：

width: 100px;
word-wrap: break-word;
display:inline-block;

它在IE和FF中都适用于我。

Answer 5

它适用于Firefox：

word-break: initial;
word-wrap: break-word;

Answer 6

这对我很有帮助：

from tkinter import *

root = Tk()
root.title("pack_forget check")

tk_window_width = 500
tk_window_height = 300
screen_width = root.winfo_screenwidth() # width of the screen
screen_height = root.winfo_screenheight() # height of the screen
x = (screen_width/2) - (tk_window_width/2)
y = (screen_height/2) - (tk_window_height/2)
root.geometry('%dx%d+%d+%d' %(tk_window_width, tk_window_height, x, y))

frame1 = Frame(root, bg="red", height=250, width=250)
frame2 = Frame(root, bg="green", height=250, width=250)

def first():
    frame1.pack(side=TOP, padx=20, pady=20)
    frame1.pack_propagate(0)
    frame2.pack_forget()

def second():
    frame2.pack(side=TOP, padx=20, pady=20)
    frame2.pack_propagate(0)
    frame1.pack_forget()   

label1 = Label(frame1, text="Frame 1")
label1.pack(side="top")
button1 = Button(frame1, text="button 1", command=second, width=10)
button1.pack(side="bottom")

label2 = Label(frame2, text="Frame 2")
label2.pack(side="top")
button2 = Button(frame2, text="button 2", command=first, width=10)
button2.pack(side="bottom")

frame1.pack(side=TOP, padx=20, pady=20)
frame1.pack_propagate(0)

root.mainloop()

看起来溢出包装是firefox中的新功能。更多信息可以在这里找到：

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

Answer 7

关于我们试试这个：

div{ overflow-wrap:break-word; }

Answer 8

word-break: break-word已过时。您应该使用： word-break: normal; overflow-wrap: anywhere

Answer 9

我需要几个答案的组合才能使它同时在Chrome和Firefox中工作：

.white-space-pre-wrap {
  white-space: pre-wrap;
  word-break: break-all;
  word-wrap: break-word;
  display: inline-block;
}

Answer 10

它对我来说很好：

  /* Mozilla fix */
  word-break: break-all;

  /* Chrome fix */
  word-break: break-word;
  word-wrap: break-word;
  overflow-wrap: break-word;

Answer 11

使用以下样式在mozilla firefox中对我来说效果很好。

word-wrap: break-word;
display:block;

如何使用CSS进行Firefox破解？

11 个答案: