为集成的文本添加颜色，使其看起来像法国国旗

Question

我在网页中给出了一个给定的文本块，并且我想使它看起来像使用JavaScript和JQuery的法国国旗（蓝色/白色/红色）。

现在我尝试下面的代码：JSFiddle

或者，如果你更成片段＃1：

jQuery(function ($) { 
 
    // Calculates the text width in <p> 
 
\t var html_cur = $('.loremipsum').html(); 
 
\t var html_calc = '<span>' + html_cur + '</span>'; 
 
\t $('.loremipsum').html(html_calc); 
 
\t var width = $('.loremipsum').find('span:first').width(); 
 
    
 
\t var color_width = Math.floor(width/3), // Width of each color 
 
\t \t text = $(".loremipsum").text(), // Text of <p> 
 
\t \t array = [], // Array containing each sentences 
 
\t \t sentence = '', // Current sentence 
 
\t \t sentence_width = 0; // Current sentence width 
 

 
\t for(var i = 0; i < text.length; i++) { 
 
    \t // Gets the char in the text 
 
\t \t var char = text[i]; 
 
\t \t 
 
    // Calulates actual char's width in pixels 
 
\t \t var html_calc = '<span>' + char + '</span>'; 
 
\t \t $('.loremipsum').html(html_calc); 
 
\t \t var width = $('.loremipsum').find('span:first').width(); 
 
\t \t 
 
    // Apply to variables 
 
\t \t sentence_width += width; 
 
\t \t sentence += char; 
 

 
\t \t // 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 
 
\t \t if(sentence_width >= color_width - 10) { 
 
\t \t \t array.push(sentence); 
 
\t \t \t sentence = ''; 
 
\t \t \t sentence_width = 0; 
 
\t \t } 
 
\t } 
 

 
\t // Variables for final html 
 
\t var final_html = '', 
 
\t \t color = 0; 
 

 
\t // Loops through the sentences and add them in between the correct color 
 
\t final_html = '<span class="color-0">'; 
 
\t for (var i = 0, j = array.length; i < j; i++) { 
 
\t \t final_html += array[i]; 
 
\t \t color = (color == 2) ? 0 : color + 1; 
 
\t \t final_html += '</span><span class="color-'+color+'">'; 
 
\t } 
 
\t final_html += '</span>'; 
 

 
\t // Display text on screen 
 
\t $('.loremipsum').html(final_html); 
 
});

.loremipsum { 
 
\t border-radius: 5px; 
 
\t font-size: 12px; 
 
    width: 300px; 
 
} 
 

 
.color-0 { 
 
\t color : blue; 
 
} 
 

 
.color-1 { 
 
\t color : white; 
 
} 
 

 
.color-2 { 
 
\t 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. 计算th e p元素中文本的宽度，并将其除以3以获得每种颜色的宽度。
2. 将文本拆分为句子，将其放入数组中。每个句子的宽度应等于或略低于颜色的宽度。这是通过遍历文本中的字符来完成的，并计算每个字符的宽度以知道何时将文本分割成新的句子。
3. 生成p元素的最终文本。意思是用适当的颜色（蓝色，白色，红色，重复）在span元素中封装每个句子。

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

有没有人有任何想法让这看起来像一个实际的蓝/白/红色文本集团？

感谢您的帮助！ :)

Answer 1

使用@DaniP的评论

他设置一个background gradient使用CSS，然后通过-webkit-background-clip

body { background-color: lightgray; } /* Just for easier viewing */ 
 
.loremipsum { 
 
    font-size: 15px; 
 
    background: -webkit-linear-gradient(0, mediumblue 33.3%, white 33.3%, white 66.6%, red 66.6%); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
}

<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>