$(function(){$('span').width($('span').width()/2);$('span:nth-child(2)').css('text-indent', -$('span').width());});

body{font-family: arial;}span{display: inline-block;overflow: hidden;}span:nth-child(2){color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><span>X</span><span>X</span>

$(function(){var $hc = $('.half-color');var str = $hc.text();$hc.html("");
var i = 0;var chars;var dupText;
while(i < str.length){chars = str[i];if(chars == " ") chars = "&nbsp;";dupText = "<span>" + chars + "</span>";
var firstHalf = $(dupText);var secondHalf = $(dupText);
$hc.append(firstHalf)$hc.append(secondHalf)
var width = firstHalf.width()/2;
firstHalf.width(width);secondHalf.css('text-indent', -width);
i++;}});

.half-color span{font-size: 2em;display: inline-block;overflow: hidden;}.half-color span:nth-child(even){color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="half-color">This is a sentence</div>

// jQuery for automated modejQuery(function($) {var text, chars, $el, i, output;
// Iterate over all class occurences$('.textToHalfStyle').each(function(idx, el) {$el = $(el);text = $el.text();chars = text.split('');
// Set the screen-reader text$el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');
// Reset output for appendingoutput = '';
// Iterate over all chars in the textfor (i = 0; i < chars.length; i++) {// Create a styled element for each character and append to containeroutput += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';}
// Write to DOM only once$el.append(output);});});

.halfStyle {position: relative;display: inline-block;font-size: 80px; /* or any font size will work */color: black; /* or transparent, any color */overflow: hidden;white-space: pre; /* to preserve the spaces from collapsing */}
.halfStyle:before {display: block;z-index: 1;position: absolute;top: 0;left: 0;width: 50%;content: attr(data-content); /* dynamic content for the pseudo element */overflow: hidden;color: #f00;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p><span class="halfStyle" data-content="X">X</span><span class="halfStyle" data-content="Y">Y</span><span class="halfStyle" data-content="Z">Z</span><span class="halfStyle" data-content="A">A</span>
<hr/><p>Automated:</p>
<span class="textToHalfStyle">Half-style, please.</span>

jQuery(function($) {var halfstyle_text, halfstyle_chars, $halfstyle_el, halfstyle_i, halfstyle_output, halfstyle_style;
// Iterate over all class occurrences$('.textToHalfStyle').each(function(idx, halfstyle_el) {$halfstyle_el = $(halfstyle_el);halfstyle_style = $halfstyle_el.data('halfstyle') || 'hs-base';halfstyle_text = $halfstyle_el.text();halfstyle_chars = halfstyle_text.split('');
// Set the screen-reader text$halfstyle_el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + halfstyle_text + '</span>');
// Reset output for appendinghalfstyle_output = '';
// Iterate over all chars in the textfor (halfstyle_i = 0; halfstyle_i < halfstyle_chars.length; halfstyle_i++) {// Create a styled element for each character and append to containerhalfstyle_output += '<span aria-hidden="true" class="halfStyle ' + halfstyle_style + '" data-content="' + halfstyle_chars[halfstyle_i] + '">' + halfstyle_chars[halfstyle_i] + '</span>';}
// Write to DOM only once$halfstyle_el.append(halfstyle_output);});});

/* start half-style hs-base */
.halfStyle.hs-base {position: relative;display: inline-block;font-size: 80px; /* or any font size will work */overflow: hidden;white-space: pre; /* to preserve the spaces from collapsing */color: #000; /* for demo purposes */}
.halfStyle.hs-base:before {display: block;z-index: 1;position: absolute;top: 0;width: 50%;content: attr(data-content); /* dynamic content for the pseudo element */pointer-events: none; /* so the base char is selectable by mouse */overflow: hidden;color: #f00; /* for demo purposes */}
/* end half-style hs-base */

/* start half-style hs-horizontal-third */
.halfStyle.hs-horizontal-third { /* base char and also the bottom 1/3 */position: relative;display: inline-block;font-size: 80px; /* or any font size will work */color: transparent;overflow: hidden;white-space: pre; /* to preserve the spaces from collapsing */color: #f0f;text-shadow: 2px 2px 0px #0af; /* for demo purposes */}
.halfStyle.hs-horizontal-third:before { /* creates the top 1/3 */display: block;z-index: 2;position: absolute;top: 0;height: 33.33%;content: attr(data-content); /* dynamic content for the pseudo element */overflow: hidden;pointer-events: none; /* so the base char is selectable by mouse */color: #f00; /* for demo purposes */text-shadow: 2px -2px 0px #fa0; /* for demo purposes */}
.halfStyle.hs-horizontal-third:after { /* creates the middle 1/3 */display: block;position: absolute;z-index: 1;top: 0;height: 66.66%;content: attr(data-content); /* dynamic content for the pseudo element */overflow: hidden;pointer-events: none; /* so the base char is selectable by mouse */color: #000; /* for demo purposes */text-shadow: 2px 2px 0px #af0; /* for demo purposes */}
/* end half-style hs-horizontal-third */

/* start half-style hs-PeelingStyle, by user SamTremaine on Stackoverflow.com */
.halfStyle.hs-PeelingStyle {position: relative;display: inline-block;font-size: 68px;color: rgba(0, 0, 0, 0.8);overflow: hidden;white-space: pre;transform: rotate(4deg);text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);}
.halfStyle.hs-PeelingStyle:before { /* creates the left part */display: block;z-index: 1;position: absolute;top: -0.5px;left: -3px;width: 100%;content: attr(data-content);overflow: hidden;pointer-events: none;color: #FFF;transform: rotate(-4deg);text-shadow: 0px 0px 1px #000;}
/* end half-style hs-PeelingStyle */

/* start half-style hs-KevinGranger, by user KevinGranger on StackOverflow.com*/
.textToHalfStyle.hs-KevinGranger {display: block;margin: 200px 0 0 0;text-align: center;}
.halfStyle.hs-KevinGranger {font-family: 'Libre Baskerville', serif;position: relative;display: inline-block;width: 1;font-size: 70px;color: black;overflow: hidden;white-space: pre;text-shadow: 1px 2px 0 white;}
.halfStyle.hs-KevinGranger:before {display: block;z-index: 1;position: absolute;top: 0;width: 50%;content: attr(data-content); /* dynamic content for the pseudo element */overflow: hidden;color: white;}
/* end half-style hs-KevinGranger

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><p><span class="textToHalfStyle" data-halfstyle="hs-base">Half-style, please.</span></p><p><span class="textToHalfStyle" data-halfstyle="hs-horizontal-third">Half-style, please.</span></p><p><span class="textToHalfStyle" data-halfstyle="hs-PeelingStyle">Half-style, please.</span></p><p style="background-color:#000;"><span class="textToHalfStyle" data-halfstyle="hs-KevinGranger">Half-style, please.</span></p>

h1 {display: inline-block;margin: 0; /* for demo snippet */line-height: 1em; /* for demo snippet */font-family: helvetica, arial, sans-serif;font-weight: bold;font-size: 300px;background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);background-clip: text;-webkit-text-fill-color: transparent;}

<h1>X</h1>

$("div").each(function() {var CHARS = $(this).text().split('');$(this).html("");$.each(CHARS, function(index, char) {var canvas = $("<canvas />").css("width", "40px").css("height", "40px").get(0);$("div").append(canvas);var ctx = canvas.getContext("2d");var gradient = ctx.createLinearGradient(0, 0, 130, 0);gradient.addColorStop("0", "blue");gradient.addColorStop("0.5", "blue");gradient.addColorStop("0.51", "red");gradient.addColorStop("1.0", "red");ctx.font = '130pt Calibri';ctx.fillStyle = gradient;ctx.fillText(char, 10, 130);});});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div>Example Text</div>

span {position: relative;color: rgba(50,50,200,0.5);}
span:before {content: attr(data-char);position: absolute;width: 50%;overflow: hidden;color: rgb(50,50,200);}

<span data-char="X">X</span>

var textToHalfStyle = $('.textToHalfStyle').text();var textToHalfStyleChars = textToHalfStyle.split('');$('.textToHalfStyle').html('');$.each(textToHalfStyleChars, function(i,v){$('.textToHalfStyle').append('<span class="halfStyle" data-content="' + v + '">' + v + '</span>');});

body{background-color: black;}.textToHalfStyle{display:block;margin: 200px 0 0 0;text-align:center;}.halfStyle {font-family: 'Libre Baskerville', serif;position:relative;display:inline-block;width:1;font-size:70px;color: black;overflow:hidden;white-space: pre;text-shadow: 1px 2px 0 white;}.halfStyle:before {display:block;z-index:1;position:absolute;top:0;width: 50%;content: attr(data-content); /* dynamic content for the pseudo element */overflow:hidden;color: white;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><span class="textToHalfStyle">Dr. Jekyll and M. Hide</span>

var title = document.querySelector('h1'),text = title.innerHTML,svgTemplate = document.querySelector('svg'),charStyle = svgTemplate.querySelector('#text');
svgTemplate.style.display = 'block';
var space = 0;
for (var i = 0; i < text.length; i++) {var x = charStyle.cloneNode();x.textContent = text[i];svgTemplate.appendChild(x);x.setAttribute('x', space);space += x.clientWidth || 15;}
title.innerHTML = '';title.appendChild(svgTemplate);

<svg style="display: none; height: 100px; width: 100%" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><defs id="FooDefs"><linearGradient id="MyGradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="50%" stop-color="blue" /><stop offset="50%" stop-color="red" /></linearGradient></defs><text y="50%" id="text" style="font-size: 72px; fill: url(#MyGradient)"></text></svg>
<h1>This is not a solution X</h1>

.halfed, .halfed1 {float: left;}
.halfed, .halfed1 {font-family: arial;font-size: 300px;font-weight: bolder;width: 200px;height: 300px;position: relative; /* To help hold the content value within */overflow: hidden;color: #000;}



.halfed:before, .halfed1:before   {width: 50%; /* How much we'd like to show */overflow: hidden; /* Hide what goes beyond our dimension */content: 'X'; /* Halfed character */height: 100%;position: absolute;color: #28507D;
}


/* For Horizontal cut off */
.halfed1:before   {width: 100%;height: 55%;  
}

<div class="halfed"> X </div>
<div class="halfed1"> X </div>

body {text-align: center;margin: 0;}
h1 {color: #111;font-family: arial;position: relative;font-family: 'Oswald', sans-serif;display: inline-block;font-size: 2.5em;}
h1::after {content: attr(data-title-text);color: #e5554e;position: absolute;left: 0;top: 0;clip: rect(0, 1000px, 30px, 0);}

<h1 data-title-text="Display Text">Display Text</h1>

p.char {position: relative;display: inline-block;font-size: 60px;color: red;}
p.char:before {position: absolute;content: attr(char);width: 50%;overflow: hidden;color: black;}

<p class="char" char="S">S</p><p class="char" char="t">t</p><p class="char" char="a">a</p><p class="char" char="c">c</p><p class="char" char="k">k</p><p class="char" char="o">o</p><p class="char" char="v">v</p><p class="char" char="e">e</p><p class="char" char="r">r</p><p class="char" char="f">f</p><p class="char" char="l">l</p><p class="char" char="o">o</p><p class="char" char="w">w</p>

div {position: relative;top: 2em;height: 2em;text-transform: full-width;}
div:before,div:after {content: attr(data-content);position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
div:after {color: red;/* mask for a single character. By repeating this mask, all the string becomes masked */-webkit-mask-image: linear-gradient(to right, transparent 0, transparent .5em, white .5em, white 1em);-webkit-mask-repeat: repeat-x;  /* repeat the mask towards the right */-webkit-mask-size: 1em;         /* relative width of a single character */    
/* non-vendor mask settings */mask-image: linear-gradient(to right, transparent 0, transparent .5em, white .5em, white 1em);mask-repeat: repeat-x;mask-size: 1em;}

/* demo purposes */input[name="fontSize"]:first-of-type:checked ~ div {font-size: 1em;}
input[name="fontSize"]:first-of-type + input:checked ~ div {font-size: 2em;}
input[name="fontSize"]:first-of-type + input + input:checked ~ div {font-size: 3em;}

Font-size:<input type="radio" name="fontSize" value="1em"><input type="radio" name="fontSize" value="2em" checked><input type="radio" name="fontSize" value="3em">
<div data-content="A CSS only solution..."></div><div data-content="Try it on Firefox!"></div>

constdataElement = document.getElementById("data"),content = dataElement.textContent,zoom = function (fontSize) {dataElement.style['font-size'] = fontSize + 'em';};
while (dataElement.firstChild) {dataElement.firstChild.remove()}for(var i = 0; i < content.length; ++i) {constspanElem = document.createElement('span'),ch = content[i];spanElem.setAttribute('data-ch', ch);spanElem.appendChild(document.createTextNode(ch === ' ' ? '\u00A0' : ch));data.appendChild(spanElem);}

#data {position: relative;top: 2em;height: 2em;font-size: 2em;}
#data span {display: inline-block;position: relative;color: transparent;}
#data span:before,#data span:after {content: attr(data-ch);display: inline-block;position: absolute;top: 0;right: 0;bottom: 0;left: 0;text-align: center;color: initial;}
#data span:after {color: red;-webkit-mask-image: linear-gradient(to right, transparent 0, transparent 50%, white 50%, white 100%);mask-image: linear-gradient(to right, transparent 0, transparent 50%, white 50%, white 100%);}

Font-size:<input type="range" min=1 max=4 step=0.05 value=2 oninput="zoom(this.value)" onchange="zoom(this.value)">
<div id="data">A Fallback Solution...For all browsers</div>

div {font-size: 80px;font-weight: bolder;color: transparent;padding: 0;margin: 0;background: linear-gradient(90deg, rgb(34, 67, 143) 0% 50%, #409FBF 50%);background-clip: text;-webkit-background-clip: text;}
.one {font-family: 'Nova Mono';background-repeat: repeat-x;background-size: 45px;}
.two {font-family: 'Gideon Roman';writing-mode: vertical-lr;text-orientation: upright;letter-spacing: -35px;height: 500px;}

<!-- get the fonts --><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Nova+Mono&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Gideon+Roman&display=swap" rel="stylesheet">

<div id='one' class="one">X-RAY Winter</div><div class="two">Minty</div>