Saut de ligne pour un texte à 200px

Bonjour,
j'aimerais pouvoir écrire un texte sur plusieurs lignes, dès que la ligne courante a dépassé 200px, en javascript.
En fait j'y arrive, mais ma fonction tronque les mots en plein milieu, ce qui n'est pas top, je ne veux pas de mots tronqués.
Alors voilà déjà mon bout de code :

		function TraitementAvant200(txt)
{
	var span = document.getElementById('span');
	span.textContent = ""+txt+"";
	if($("#span").width()<=200)
	{
		return txt;
	}
	else
	{
		var i = txt.length - 1;
		while($("#span").width() > 200)
		{
			document.getElementById('span').textContent = txt.substring(0,i);
			i--;
		}
		
		return ""+txt.substring(0,i)+"";
	}
}
function TraitementApres200(txt)
{
	var span = document.getElementById('span');
	span.textContent = ""+txt+"";
	var txtR = "";
	
	if($("#span").width()>200)
	{
				var i = txt.length - 1;
		while($("#span").width() > 200)
		{
			span.textContent = txt.substring(0,i);
			i--;
		}
		txtR = txt.substring(i, txt.length);
	}
	return txtR;
}
function TronqueA50PX(txt)
{
	var txtR = "";
	
	var txtAV = "";
	var txtAP = "";
	
	var txtP = "";
	
	var span = document.getElementById('span');
	span.textContent = ""+txt+"";
	var longueur = $("#span").width();
	
	if(longueur <= 200)
	{
		txtR = txt;
	}
	else
	{
	
		txtP = txt;
		
		while($("#span").width() > 200)
		{
			
			
			txtAV = TraitementAvant200(txtP);
		
			txtAP = TraitementApres200(txtP);
		
		    txtR+= ""+txtAV+"</br>";
	
			span.textContent = txtAP;
			
			txtP = txtAP;
			
			
		}
	}
	return ""+txtR+""+txtAP+"";
}

Plus haut dans l'HTML, j'ai créé un <span> dans lequel j'écris le texte, ce qui permet d'en déduire sa taille totale en px.
Ensuite, je boucle sur les caractères pour voir à partir duquel ma ligne dépasse 200px, et là je saute une ligne.
Mais comme je l'ai dit plus haut, je ne vois pas vraiment comment faire pour ne pas couper les mots en plein milieu...

Avez-vous une idée pour m'aider ?
Merci d'avance !