爲集成的文本添加顏色，使其看起來像法國國旗

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>