white-space：pre不適用於contenteditable。

嗨，我試圖阻止自動換行的contenteditable div。白色空間：pre屬性不適用於contenteditable。這是CSS：white-space：pre不適用於contenteditable。

.preDiv{ 
border:1px solid blue; 
overflow:auto; 
width:100px; 
white-space:pre; 
}

這裏是一個小提琴：contentEditable-fiddle

我希望它的工作它，彷彿它是不是一個CONTENTEDITABLE的方式。

我需要這個，因爲在我的真實代碼中，div在它旁邊有行號，當div開始換行時，當div的寬度發生變化時，它們不再正確。

我試圖使用white-space：nowrap，但整個文本都設置在一行上。

有沒有人有一個想法，我可以如何防止寬度改變時的文本重新排列？非常感謝， Jenita

來源

2015-05-19 Jenita

幸運的是，答案是在那裏對這個小提琴：contenteditable with white-space pre

這是一個用這個人的CSS：

#editor { 
border: 1px solid black; 
height: 200px; 
width: 300px; 
    white-space: pre; 
    word-wrap: normal; 
    overflow-x: auto; 
}

所以它需要額外的：字 - 包裝：正常;

謝謝瑞克的幫助，它提高了士氣！

來源

2015-05-20 01:32:04 Jenita

很高興你找到了解決方案，它比使用包裝更清晰。你可以接受你自己的答案。 –

真的很有趣的問題。

我已經得到了它在Chrome中工作（至少）：

把preDiv在包裝元素。
將overflow風格移動到包裝。
將display: table-cell;添加到preDiv。

不知道爲什麼需要＃3。我通過試驗和錯誤到達了那裏。

changeWidth=function(){ 
 
    document.getElementById('wrapper').style.width='100px'; 
 
}

#wrapper { 
 
    overflow:auto; 
 
    border:1px solid blue; 
 
} 
 

 
#preDiv{ 
 
    width: 500px; 
 
    white-space: pre; 
 
    display: table-cell; 
 
}

<div contenteditable id="wrapper"> 
 
<div id='preDiv'> 
 
<span>hello hello hello hello</span> 
 
<span>Here I am, Here I am,Here I am,Here I am,</span> 
 
and so forth, and so forth and so forth 
 
</div> 
 
</div> 
 

 
<button onclick='changeWidth()'>change Width</button>

來源

2015-05-19 23:05:30

非常感謝，它的工作！ – Jenita

嗨，不幸的是顯示：table-cell不允許我設置div的高度，這是我在真實代碼中需要的。我嘗試了所有其他顯示選項。他們都有問題。任何想法，對於其他工作？對不起，我很快就歡呼起來。 – Jenita

white-space：pre不適用於contenteditable。

回答

相關問題