我有一个文本字符串，我以textarea（从右到左的方向）显示。用户可以动态调整textarea的大小（我使用jquery），文本将根据需要进行换行。
当用户点击提交时，我将使用该文本并使用PHP创建图像，但在提交之前我想知道“换行符”或更确切地说是“自动换行”的位置。
我到目前为止看到的每个地方只向我展示了如何在php端处理换行符。我想明确表示没有线路突破。我所拥有的是一个LONG字符串，它将根据用户设置的textarea的宽度以不同的方式进行自动换行。
我不能使用“列”或任何其他标准宽度表示，因为我有一个非常复杂的阿拉伯字体，实际上由许多不同宽度的字形（字符）组成。
如果有人知道访问单词包装的方式（在textarea或div中，如果需要），我真的很想知道。
我唯一的另一个解决方案是实际存储（在我的数据库中）每个字符的宽度（有点单调乏味，因为600种不同的字体有超过200个字符，总共......一些巨大的数字）。
我的希望并不高，但我想我会问。
谢谢
一世。贾马尔
好吧，不是找到换行符（这几乎是不可能的），你可以使用这个函数强制它们进入textarea：
function ApplyLineBreaks(strTextAreaId) {
var oTextarea = document.getElementById(strTextAreaId);
if (oTextarea.wrap) {
oTextarea.setAttribute("wrap", "off");
}
else {
oTextarea.setAttribute("wrap", "off");
var newArea = oTextarea.cloneNode(true);
newArea.value = oTextarea.value;
oTextarea.parentNode.replaceChild(newArea, oTextarea);
oTextarea = newArea;
}
var strRawValue = oTextarea.value;
oTextarea.value = "";
var nEmptyWidth = oTextarea.scrollWidth;
var nLastWrappingIndex = -1;
for (var i = 0; i < strRawValue.length; i++) {
var curChar = strRawValue.charAt(i);
if (curChar == ' ' || curChar == '-' || curChar == '+')
nLastWrappingIndex = i;
oTextarea.value += curChar;
if (oTextarea.scrollWidth > nEmptyWidth) {
var buffer = "";
if (nLastWrappingIndex >= 0) {
for (var j = nLastWrappingIndex + 1; j < i; j++)
buffer += strRawValue.charAt(j);
nLastWrappingIndex = -1;
}
buffer += curChar;
oTextarea.value = oTextarea.value.substr(0, oTextarea.value.length - buffer.length);
oTextarea.value += "\n" + buffer;
}
}
oTextarea.setAttribute("wrap", "");
}
此函数获取textarea的ID，并且每当有自动换行时，它会将新的换行符推入textarea。在表单提交中运行该函数，您将在服务器端代码中获得包含正确换行符的文本。
成功测试IE，Chrome和Firefox可以在这里自由查看：http://jsfiddle.net/yahavbr/pH79a/1/（预览将显示新行）
这是Shadow Wizard的解决方案的功能等效实现，它更快，因为它使用二进制搜索而不是线性搜索来确定每行的长度：
function ApplyLineBreaks(strTextAreaId) {
var oTextarea = document.getElementById(strTextAreaId);
if (oTextarea.wrap) {
oTextarea.setAttribute("wrap", "off");
}
else {
oTextarea.setAttribute("wrap", "off");
var newArea = oTextarea.cloneNode(true);
newArea.value = oTextarea.value;
oTextarea.parentNode.replaceChild(newArea, oTextarea);
oTextarea = newArea;
}
var strRawValue = oTextarea.value;
oTextarea.value = "";
var nEmptyWidth = oTextarea.scrollWidth;
function testBreak(strTest) {
oTextarea.value = strTest;
return oTextarea.scrollWidth > nEmptyWidth;
}
function findNextBreakLength(strSource, nLeft, nRight) {
var nCurrent;
if(typeof(nLeft) == 'undefined') {
nLeft = 0;
nRight = -1;
nCurrent = 64;
}
else {
if (nRight == -1)
nCurrent = nLeft * 2;
else if (nRight - nLeft <= 1)
return Math.max(2, nRight);
else
nCurrent = nLeft + (nRight - nLeft) / 2;
}
var strTest = strSource.substr(0, nCurrent);
var bLonger = testBreak(strTest);
if(bLonger)
nRight = nCurrent;
else
{
if(nCurrent >= strSource.length)
return null;
nLeft = nCurrent;
}
return findNextBreakLength(strSource, nLeft, nRight);
}
var i = 0, j;
var strNewValue = "";
while (i < strRawValue.length) {
var breakOffset = findNextBreakLength(strRawValue.substr(i));
if (breakOffset === null) {
strNewValue += strRawValue.substr(i);
break;
}
var nLineLength = breakOffset - 1;
for (j = nLineLength - 1; j >= 0; j--) {
var curChar = strRawValue.charAt(i + j);
if (curChar == ' ' || curChar == '-' || curChar == '+') {
nLineLength = j + 1;
break;
}
}
strNewValue += strRawValue.substr(i, nLineLength) + "\n";
i += nLineLength;
}
oTextarea.value = strNewValue;
oTextarea.setAttribute("wrap", "");
}
我认为最简单的方法是将html代码中textarea的自动换行设置为“hard”，如下所示：
<textarea id='yourTextArea' wrap='hard'></textarea>
这意味着，无论您的textarea为什么打破该行，您还将在提交时在字符串中插入\ n换行符。如果你发现这通过你的字符串，它将很容易确定最初的休息时间。或者您也可以将这些字符转换为 使用PHP的nl2br（）函数的html标签。
出于某种原因，当这篇文章被更新时，我从未收到过警报......昨晚，我对如何确定换行的位置有了这个BRILLIANT的想法...我会重建字符串，每次检查宽度，它工作所以我来这里分享它...发现我落后了一周
无论如何2件重要的事情
我知道这可能不适用于所有浏览器所以，我要求如果有人知道如何使这个万无一失，或接近它，请分享。
首先，样式是同步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", "
");
content = content.replace("\r", "
");
content = content.replace("\n", "
");
$("#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 + "
" + 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>这是我用于计算textarea中每行文本的实际行数（换行后）的示例。请注意，当滚动条开始出现时，textarea的文本宽度会略微缩小。这可能导致先前内容的进一步包装，使得先前计算的行高度不正确。因此，textarea必须将CSS样式溢出设置为“滚动”以强制始终显示滚动条。
function get_row_wraps(txtArea){
if(wrap=="off"){
var out=[];
for(var i=txtArea.split_lines.length; i>=0; --i)
out[i]=1;
return out;
}
var its=txtArea.value.split("\n");
var newArea = txtArea.cloneNode(true);
newArea.hidden=true;
newArea.style.visibility = "hidden";
txtArea.parentNode.appendChild(newArea);
// get single row height
newArea.style.height="auto";
newArea.style.overflowY="scroll";
newArea.value="1\n2\n3";
var unit_height=newArea.scrollHeight;
newArea.value="1\n2\n3\n4";
var unit_height=newArea.scrollHeight-unit_height;
newArea.style.height=Math.round(unit_height*1.5)+"px"; // so that the scrollbar does not vanish
newArea.value="";
// obtain row height for every line of text
function comp_Nrow(scroll_height){
return Math.floor(scroll_height/unit_height);
}
function calc_rows(txt){
newArea.value+=txt;
return comp_Nrow(newArea.scrollHeight);
}
var out=[];
for(var i=0; i<its.length; i++)
out.push(calc_rows(i==0?its[i]:("\n"+its[i])));
txtArea.parentNode.removeChild(newArea);
for(var i=out.length-1; i>0; i--)
out[i]-=out[i-1];
// alert(out);
return out;
}
上面的函数返回textarea中每行文本（用“\ n”分隔）的实际包装行数。至少对于Chrome和Firefox，计算是准确的。
在“Chrome”，“Firefox”和“IE”上进行了代码测试。获取换行符和回车组件“textArea”（客户端使用javascript）。
效果很好！。我想和你分享
重要的是包括风格
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<%--//definimos un estilo--%>
<STYLE type="text/css">
#CadTemp
{
font-family: "Arial", serif;
font-size: 12pt;
visibility: hidden;
position: absolute;
top: -100;
left: 0px;
}
</STYLE>
<script type="text/javascript">
function mostrar() {
return 'ancho cadena: ' + document.getElementById('myTextarea').value.visualLength() + ' \n' + 'ancho textarea: ' + (document.getElementById('myTextarea').scrollWidth -4);
}
//sustituimos el espacio en blanco por el punto, tienen exactamente el mismo tamaño en 'pixeles'
function reemplazarEspacios(texto) {
var devolver = "";
for (var i = 0; i < texto.length; i++) {
if (texto.charAt(i) == ' ') {
devolver += '.'
} else {
devolver += texto.charAt(i);
}
}
return devolver;
}
// Calcula los pixeles de ancho que ocupa un texto (la cadena debe tener el mismo tamaño y tipo de fuente)
String.prototype.visualLength = function () {
var ruler = document.getElementById("CadTemp");
ruler.innerHTML = reemplazarEspacios(this)
return ruler.offsetWidth;
}
//quitar espacios a la derecha de la cadena
String.prototype.rtrim = function() {return this.replace(/\s+$/,"");}
//devuelve el ultimo espacio de la cadena (que no sea espacio final)
function IndEspacio(cadena) {
//quito los espacios al final
var cadenaTemp = cadena.rtrim();
return cadenaTemp.lastIndexOf(' ');
}
//insertar un salto de linea
function AplicarSaltosLinea(ID_elemento) {
//guardo el elemento web en una variable
var TextArea = document.getElementById(ID_elemento);
var cadenaTexto = "";
var Cadenafinal = "";
var buffer = "";
//recorremos toda la cadena
for (var i = 0; i < TextArea.value.length; i++) {
//guardamos el caracater en la cadena
cadenaTexto += TextArea.value.charAt(i);
//si hay un retorno de carro, antes de llegar al final del textArea
if (TextArea.value.charAt(i) == '\n') {
Cadenafinal += cadenaTexto.substr(0, cadenaTexto.lastIndexOf('\n') + 1) ;
cadenaTexto = "";
}
//si el ancho actual de la cadena es mayor o igual que el ancho del textarea (medida pixeles)
if (cadenaTexto.visualLength() > TextArea.scrollWidth - 4) {
//recuperamos el ultimo espacio en blanco antes de la ultima letra o palabra
var indiceEspacio = IndEspacio(cadenaTexto)
buffer = "";
//ultimo espacio en blanco detectado, metemos el trozo de palabra desde el ultimo espacio
if (indiceEspacio >= 0) {
for (var j = indiceEspacio + 1; j <= i; j++)
buffer += cadenaTexto.charAt(j);
indiceEspacio = -1;
} else {
buffer += TextArea.value.charAt(i);
}
//coloca la cadena
Cadenafinal += cadenaTexto.substr(0, cadenaTexto.length - buffer.length) + "\n";
cadenaTexto = buffer;
}
}
Cadenafinal += cadenaTexto;
document.getElementById("pnlPreview").innerHTML = Cadenafinal.replace(new RegExp("\\n", "g"), "<br />");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<span id="CadTemp">hola</span>
</div>
<br />
<div>
<textarea cols="20" rows="5" id="myTextarea" wrap="hard"
style="font-family: Arial, Helvetica, sans-serif; font-size: 12pt"></textarea>
</div>
<div id="pnlPreview"></div>
<div>
<button type="button" onclick="AplicarSaltosLinea('myTextarea');">Apply Line Breaks</button>
<button type="button" onclick="alert( document.getElementById('myTextarea').value )">mensaje</button>
<button type="button" onclick="alert( mostrar())">calcular Ancho Pixel</button>
<br />
</div>
</form>
</body>
</html>
我不是故意挖掘旧帖子，但这是我搜索了一段时间之后出来的帖子。 @Shadow Wizard的解决方案对我不起作用，因为它在每个句子后面留了一个空格，所以我决定做一些调整。我不是每个字符都这样做，而是按字面做。这样可以更方便地进行检查，并且速度提高10倍，使用完整的Lorem Ipsum进行检查（约600毫秒对小提琴6秒，120毫秒无小提琴）。
I have created a (documented) fiddle.不过，我会看看能不能再优化一下。
function applyLineBreaks = function(strTextAreaId) {
// Get txtarea
var oTextarea = document.getElementById(strTextAreaId);
// Disable textarea wrap
oTextarea.setAttribute("wrap", "off");
// Split the characters into an array
var aWords = oTextarea.value.split(' ');
// Empty the textarea
oTextarea.value = "";
// Get textarea scrollwidth
var nEmptyWidth = oTextarea.scrollWidth;
// Start looping over the words
for(var i = 0; i < aWords.length; i++)
{
if(i > 1000)
{
break;
}
var curWord = aWords[i] + ' ';
// Add character to textarea
oTextarea.value += curWord;
// console.log(oTextarea.scrollWidth, nEmptyWidth);
if(oTextarea.scrollWidth > nEmptyWidth)
{
let oldVal = oTextarea.value;
let newVal = oldVal.substring(0, (oldVal.length - (curWord.length + 1))) + "\n" + curWord;
oTextarea.value = newVal;
}
}
oTextarea.setAttribute("wrap", "");
return oTextarea.value;
};