Question

这我刚刚创建了一个div。当我输入内容时，我给了一个White-space: Normal自动换行功能。此功能适用于Chrome，Opera和Safari浏览器。但这些话并没有包含在Mozilla Firefox和Edge浏览器中。我还尝试了Word-wrap: break-word功能。这也行不通。请给我一个解决方案。

＆＃13;

<div class = "list-name-field" id = "SAVE_LIST" style = "white-space: normal; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; background-color: #ccc; margin-top: 5px; " contenteditable = "true" data-placeholder = "Add a List..."></div>

＆＃13;

Answer 1

如果您需要打破长话，则需要添加word-break: break-all

<div class = "list-name-field" id = "SAVE_LIST" style = "white-space: normal;word-break: break-all; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; background-color: #ccc; margin-top: 5px; " contenteditable = "true" data-placeholder = "Add a List..."></div>

Answer 2

试试这个DEMO

添加到CSS：

word-wrap:break-word

Answer 3

使用以下属性：

<div class = "list-name-field" id = "SAVE_LIST" style =" width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto;  white-space: -moz-pre-wrap; word-wrap: break-word; margin-right: auto; background-color: #ccc; margin-top: 5px; " contenteditable = "true" data-placeholder = "Add a List..."></div>

和html：

#!/usr/bin/perl

use strict;
use warnings;
use Getopt::Long;

my @input = ();
my $help = '';
my $other = '';

GetOptions(
    'help'          =>  \$help,
    'input=s{1,}'   =>  \@input,
    'other=s'       =>  \$other
);

自动换行不起作用

3 个答案: