JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td style="width:2em">新年木头</td>
        <td style="width:2em">快乐敬上</td>
        <td style="width:2em">!</td>
    </tr>
</table>

CSS

tr, td {
    padding: 0;
    margin: 0;
    border: none;
    vertical-align: top;
}

span {
    width: 1em;
    height: 1em;
    float: left;
}

JavaScript

新斱年幵快忬乐乑$(function() {
    $('td').each(function() {
        $(this).css('width', $(this).width());
        $(this).css('height', $(this).height());
        var content = $(this).text();
        $(this).html(content.replace(
            /./g, function(char) {
                return '<span>' + char + '</span>';
            }
        ));
    });
    var words = [];
    $('span').each(function() {
        words.push({
            char: $(this).text(),
            left: $(this).offset().left,
            top: $(this).offset().top
        });
        $('body').append("<div>" + $(this).text() + " top:" + $(this).offset().top + " left:" + $(this).offset().left + "</div>");
    });
    words.sort(function(a, b) {
        if (a.top != b.top)
            return a.top - b.top;
        else
            return a.left - b.left;
    });
    var result = "";
    for (var i = 0; i < words.length; i++)
        result += words[i].char;
    $('body').append(result);
});