为文本块上色，使其看起来像法国国旗

我在一个网页中有一个给定的文本块，我想让它看起来像法国国旗(蓝/白/红)使用javascript和JQuery。

现在我尝试了以下代码:

或者如果你更喜欢Stackoverflow片段:

jQuery(function ($) {
  // Calculates the text width in <p>
	var html_cur = $('.loremipsum').html();
	var html_calc = '<span>' + html_cur + '</span>';
	$('.loremipsum').html(html_calc);
	var width = $('.loremipsum').find('span:first').width(); 
  
	var color_width = Math.floor(width / 3), // Width of each color
		text = $( ".loremipsum" ).text(), // Text of <p>
		array = [], // Array containing each sentences 
		sentence = '', // Current sentence
		sentence_width = 0; // Current sentence width
	for(var i = 0; i < text.length; i++) {
  	// Gets the char in the text
		var char = text[i];
		
    // Calulates actual char's width in pixels
		var html_calc = '<span>' + char + '</span>';
		$('.loremipsum').html(html_calc);
		var width = $('.loremipsum').find('span:first').width();
		
    // Apply to variables
		sentence_width += width;
		sentence += char;
		// If sentence is long enough, 
    // resets the variables to start a new sentence and add it to the array
    // Added the -10 to make sure sentences never overflow the color_width
    // but looks like it's not enough
		if(sentence_width >= color_width - 10) {
			array.push(sentence);
			sentence = '';
			sentence_width = 0;
		}
	}
	// Variables for final html
	var final_html = '',
		color = 0;
	// Loops through the sentences and add them in between the correct color
	final_html = '<span class="color-0">';
	for (var i = 0, j = array.length; i < j; i++) {
		final_html += array[i];
		color = (color == 2) ? 0 : color + 1;
		final_html += '</span><span class="color-'+color+'">';
	}
	final_html += '</span>';
	// Display text on screen
	$('.loremipsum').html(final_html);
});

.loremipsum {
	border-radius: 5px;
	font-size: 12px;
  width: 300px;
}
.color-0 {
	color : blue;
}
.color-1 {
	color : white;
}
.color-2 {
	color : red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="loremipsum">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

所以基本例程如下:

1. 计算p元素中文本的宽度，并将其除以3得到每种颜色的宽度。
2. 将文本分割成句子，这些句子将存储到一个数组中。每个句子的宽度应该等于或略低于颜色的宽度。这是通过迭代文本中的字符来完成的，并计算每个字符的宽度，以知道何时将文本分割成一个新句子。
3. 生成p元素的最终文本。意思是用适当的颜色(蓝色、白色、红色、重复)将每个句子封装在一个span元素中。

问题是，句子往往比它们应该有的长一点，所以颜色变化得太迟，导致每新一行的偏移量增加。

有没有人有任何想法让这个看起来像一个真正的蓝/白/红文本块?

谢谢你的帮助!:)