<p> JS/CSS 文本翻转器中的间距问题</p>

Question

我正在尝试制作一个 ambigram 制作工具，以大写字母和其他一些字体显示文本，正面朝上和正面朝下。 我设法做到了，但是单词之间的间距非常大。 有没有办法让它接近零？ 我尝试为 css 添加一些边距，但它似乎忽略了它。

它是作为 wordpress 插件制作的。 你可以看到它在这里运行： https://makeambigrams.com/demo/

<?php
add_shortcode( 'worder', 'worder_print_html' );
function worder_print_html( ) {
    wp_enqueue_script('worder-script');
    ob_start();
    ?>
    <div class="the_worder_contaienr">
        <form method="post" id="word-er-form" name="word-er-form">
            <input type="text" name="word_er_word" id="word_er_word" value="" /> <br>
            <input type="submit" value="Generate" />
        </form>
        <div id="the_result">
        </div>
    </div>
    <style>
        .the_worder_contaienr {
            text-align: center;
            margin:0
            margin-top: -20px;
        }
        .the_worder_contaienr input{
            margin:0
        }
        p.origgina_other_font, .upside_down_font p {
            font-family: serif;
            margin:0
            margin-top: -20px;
        }
        .upside_down_uppwe,.upside_down,.upside_down_font  {
            transform: scaleY(-1);
            margin:0
            margin-top: -20px;
        }
    </style>
    <?php
    //$output = ob_end_clean();
    return ob_get_clean();
    //return "foo = {$atts['foo']}";
}
function the_worder_jquery() {
    wp_register_script( 'worder-script', plugin_dir_url( __FILE__ ) . '/custom.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'the_worder_jquery' );

js

(function($) {

  $('#word-er-form').on('submit', function() {
    event.preventDefault();
    var the_input = $('#word_er_word').val().toLowerCase();
    var the_characters = the_input.split('');
    console.table(the_characters);
    var the_original = $('#word_er_word').val();
    var the_upper_case = the_input.toUpperCase();
    var the_revese_case = the_characters.reverse().toString().replace(/,/g, "");;
    console.log(the_original);
    console.log(the_upper_case);
    console.log(the_revese_case);
    var the_result = '<p class="original">'+the_input+'</p>';
    the_result += '<p class="original_capitalize">'+the_upper_case+'</p>';
      the_result += '<p class="origgina_other_font">'+the_input+'</p>';
      the_result += '<div class="upside_down_font"><p>'+the_revese_case+'</p></div>';
            the_result += '<div class="upside_down_uppwe"><p>'+the_revese_case.toUpperCase()+'</p></div>';
      the_result += '<div class="upside_down"><p>'+the_revese_case+'</p></div>';
      $('#the_result').html(the_result);
  })

})( jQuery );

Answer 1

是的，这是可能的，为此您必须减少<p>标签的所有 styles，如下所示

p {
padding : 0px;
margin-top : 0px;
margin-bottom :0px;
height : 15px;

}

注意：请记住， <p>标签的默认高度设置为28px ，因此您也必须降低高度，否则可能会显示一些空间。如果style = "margin: ... "是提到删除它。

希望这可以帮助你。