Question

<div style="width:100px;">XXXXXXX XXXXXXXXXX XXXXXX XXXX XXXXXX XXXXX XXXXXXX XXXXXXXXX XX XXXX XXXXX XXXXXXX</div>

此文字的宽度超过100px。我怎么能阻止这个。我想在下一行。请不要建议word-wrap。我想让div看起来像textarea。

或者简单地说，我想要word-wrap:normal。

Answer 1

有多种方式，但其中一种方法是动态创建textarea：

var editableText = $("<textarea />");

并将其替换为div：

$（ “＃myDiv”）replaceWith（editableText）;

textarea现已到位。但它是空的，我们刚刚更换了div而失去了一切。所以我们需要以某种方式保留div的文本。一种方法是在替换之前复制div中的text / html：

var divHtml = $("#myDiv").html(); // or text(), whatever suits.

一旦我们从div获得html，我们就可以填充textarea并用textarea安全地替换div。并在用户可能想要开始编辑时将焦点设置在textarea中。到目前为止，将所有工作结合起来，我们得到：

// save the html within the div
var divHtml = $("#myDiv").html();
// create a dynamic textarea
var editableText = $("<textarea />");
// fill the textarea with the div's text
editableText.val(divHtml);
// replace the div with the textarea
$("#myDiv").replaceWith(editableText);
// editableText.focus();

它很实用，但是当用户点击div时没有任何反应，因为我们没有设置任何事件。让我们联系这些事件。当用户点击任何div $（“div”）时，点击（..），我们创建一个点击处理程序，并执行以上所有操作。

$("div").click(function() {
    var divHtml = $(this).html(); // notice "this" instead of a specific #myDiv
    var editableText = $("<textarea />");
    editableText.val(divHtml);
    $(this).replaceWith(editableText);
    editableText.focus();
});

这很好，但是当用户点击或离开textarea时，我们想要一种方法来恢复我们的div。当用户离开控件时，会触发表单控件的模糊事件。这可用于检测用户何时离开textarea，并替换div。这次我们完全相反。保留textarea的值，创建一个动态div，设置它的html，并替换textarea。

$(editableText).blur(function() {
    // Preserve the value of textarea
    var html = $(this).val();
    // create a dynamic div
    var viewableText = $("<div>");
    // set it's html 
    viewableText.html(html);
    // replace out the textarea
    $(this).replaceWith(viewableText);
});

一切都很棒，除了这个新div不会再点击转换为textarea。这是一个新创建的div，我们将不得不再次设置click事件。我们已经有了整个代码，但比重复两次更好，最好用它来创建一个函数。

function divClicked() {
    var divHtml = $(this).html();
    var editableText = $("<textarea />");
    editableText.val(divHtml);
    $(this).replaceWith(editableText);
    editableText.focus();
    // setup the blur event for this new textarea
    editableText.blur(editableTextBlurred);
})

由于整个操作是双向可逆的，我们需要对textarea做同样的事情。我们也将它转换为函数。

function editableTextBlurred() {
    var html = $(this).val();
    var viewableText = $("<div>");
    viewableText.html(html);
    $(this).replaceWith(viewableText);
    // setup the click event for this new div
    $(viewableText).click(divClicked);
});

将所有内容连接在一起，我们有2个函数，divClicked，editableTextBlurred，下面的行触发了所有内容：

$("div").click(divClicked);

我认为这个jsfiddle会给你更多的想法

http://jsfiddle.net/sunilkjt/ujzb5/3/

由于

Answer 2

你需要在单词中至少留一个空格才能让它在下一行返回。如果你想要完全分开你的单词，你必须手动完成。

您仍然可以使用overflox：hidden;

隐藏额外内容

<div style="width:100px; overflow:hidden;">yourverylongtext</div>

Answer 3

你需要给字符串留一些空间。没有空间，它会把它视为一个单词，并试图通过不破坏单词的含义将它保持在同一行。好吧，如果你愿意，你可以试试这个：

div {
width: 100px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

Answer 4

我认为您正在寻找的是：

<div style="width: 100px; white-space: pre-wrap; word-wrap: break-word"></div>

Answer 5

寻找溢出。

示例：

HTML
<div id="example"></div>
CSS
#example{
         width:100px;
         overflow:auto;
}

Answer 6

如果您的单词长度超过了div的长度，但是您不想要滚动条，则可以使用hyphenator.js来破坏它们。

防止文本超出div的宽度

6 个答案: