防止文字超出div的宽度

-4

<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。防止文字超出div的宽度

来源

2014-04-01 Subin Jacob

为什么你不想使用'换行'？在你的案例中，“单词换行”似乎是合适的。 – Cyclonecode

@KristerAndersson否，break word不等于textarea刹车。文字区域不会制动词 –

你的真实内容是否有多个词？或者它是一个loooong字符串（没有空格），就像例子中那样？ –

为了使它在下一行返回，您需要在单词中至少有一个空格。如果你想绝对让你的话分裂，你必须手动做到这一点。

您仍然可以使用overflox隐藏额外的内容：hidden;

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

来源

2014-04-01 07:11:39 Venom

您需要给字符串一些空间。没有空间的话，它会认为它是一个单词，并且会试图通过不破坏单词的含义来保持它在同一行中。好了，你可以试试这个，如果你喜欢：

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

来源

2014-04-01 07:12:53 mehulmpt

我想你要找的东西是这样的：

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

来源

2014-04-01 07:13:00 Cyclonecode

有多种方式，但其中之一是动态创建一个文本在飞行：

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

并用DIV替换它。

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

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

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

一旦我们从DIV的HTML，我们可以填写文本区域和安全替换textarea的股利。并在用户可能想要开始编辑时在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将不再转换成一个文本上点击。这是一个新创建的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/

谢谢

来源

2014-04-01 07:14:59 sunilkjt

textarea { width：100px; resize：vertical; }会给你选择不调整textarea的大小http://jsfiddle.net/sunilkjt/ujzb5/5/ – sunilkjt

'正在寻找溢出。

例子：

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

来源

2014-04-01 07:15:47

如果你有超过div的lenght长的话，但你不想要滚动条，你可以使用hyphenator.js到APPART打破他们。

来源

2014-04-01 07:23:18

防止文字超出div的宽度

回答

相关问题