Coolcrab:
私はアンビグラム作るツールを作成しようとしていることを示して首都内のテキストや他のいくつかのフォントの両方の右側アップとサイド上下。私はこれを行うために管理しますが、単語の間の間隔が非常に大きいです。それがゼロに近くなることを得るためにいくつかの方法はありますか?私は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 );
クナルRaut:
はい、それはあなたがすべてのスタイルを減少しなければならない。このため、可能である<p>
以下に示すようタグを
p {
padding : 0px;
margin-top : 0px;
margin-bottom :0px;
height : 15px;
}
注:デフォルトの高さがあることに注意してください<p>
タグがに設定されている28px
あなたがいる場合、それはいくつかのspace.Andを表示することがありますだけで他のスタイルによって、同様または他の高さを低くしなければならないので、style = "margin : ... "
削除するに言及されています。
これはあなたを助けるかもしれない願っています。