По какой-то причине меня никогда не предупреждали об обновлении этого поста ... а прошлой ночью у меня была эта ЯРКАЯ идея о том, как определить, где были разрывы строк ... Я перестроил бы строку и проверил ширинукаждый раз, и это работало, поэтому я пришел сюда, чтобы поделиться им ... и обнаружил, что я на 1 неделю отстал
В любом случае 2 важные вещи
Используемый вами код используетта же самая блестящая идея, которая у меня была (молодец), НО, когда я тестирую ее, она правильно разбивает первую строку, а затем добавляет разрыв строки после каждого символа (проверено по ссылке jsfiddle.net)
Я добавил свой код, который использует jquery и использует ширину диапазона, чтобы определить, когда нужно разбить. Сначала я попытался использовать ширину div, но div.width () возвращает ширину по умолчанию, а не ширинуcontent.
Я осведомлен, что МОЖЕТ НЕ РАБОТАТЬ НА ВСЕХ БРАУЗЕРОВ поэтому я прошу любезно спросить, если кто-нибудь знает способ сделать это надежнымэто, пожалуйста, поделитесь.
FiВо-первых, стили необходимы для синхронизации шрифтов (всех атрибутов) между textarea и div, установки размера и (для IE) удаления любых полос прокрутки, которые появляются автоматически.
.inputArea {
width:200px;
height:100px;
font-family:Arial;
font-size:12px;
overflow: auto;
border: 1px solid #cccccc;
padding:0;
margin:0;
}
.divArea {
font-family:Arial;
font-size:12px;
}
Далее я включаю jquery имои пользовательские функции:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js
"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#breakUp").click(function () {
showLineBreaks();
addLineBreaks();
});
function showLineBreaks() {
content = $("#textEntered").val();
//replace line breaks in content with "|" to allow for replacement below
content = content.replace("\r\n", "<br>");
content = content.replace("\r", "<br>");
content = content.replace("\n", "<br>");
$("#unedited").html(content);
}
function addLineBreaks() {
content = $("#textEntered").val();
//replace line breaks in content with "|" to allow for replacement below
content = content.replace("\r\n", "|");
content = content.replace("\r", "|");
content = content.replace("\n", "|");
tempContent = "";
$("#edited").html("");
for (var i = 0; i ");
} else {
tempContent = $("#edited").html();
$("#edited").html(tempContent + content.charAt(i));
if ($("#edited").width() > 200) {
$("#edited").html(tempContent + "<br>" + content.charAt(i));
}
}
}
}
});
<script>
И, наконец, моя html тестовая страница
Enter text into the textarea below (Set to 200 px width, 100 px height)<br>
<textarea id="textEntered" class="inputArea"></textarea>
<br><br>
The div below will display that text WITHOUT wrapping, BUT replacing all existing line breaks with <br><br>
<div id="unedited"></div>
<br>
The following div will display that text with line breaks ADDED to fit the wrapping<br>
<div class="divArea"><span id="edited"></span></div>
<br>
<button id="breakUp">Click Here to Convert</button>