Question

我在网页上有一个给定的文本块，我希望使用javascript和JQuery使它看起来像法国国旗（蓝/白/红）。

现在我尝试了以下代码：JSFiddle

或者，如果您更喜欢Stackoverflow片段：

filedir <- setwd("C:/test/")
file_names <- dir(filedir)
your_data_frame <- do.call(rbind,lapply(file_names,read.csv))

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

所以基本上例程如下：

计算p元素中文本的宽度，并将其除以3以获得每种颜色的宽度。
将文本拆分为句子，将其存储到数组中。每个句子的宽度应等于或略低于颜色的宽度。这是通过迭代文本中的字符来完成的，并计算每个字符的宽度，以便知道何时将文本拆分成新句子。
生成p元素的最终文本。意味着用适当的颜色（蓝色，白色，红色，重复）封装span元素中的每个句子。

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

有没有人有任何想法让它看起来像一个真正的BLUE / WHITE / RED文本集团？

感谢您的帮助！：）

Answer 1

使用@DaniP的评论

他使用css设置background gradient，然后通过-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>

为一个集团文字上色，使其看起来像法国国旗

1 个答案: