3

div内にあるテキストを歪めようとしていますが、これはすべて簡単ですが、現在の最初の数行のように、各行をdivの片側に完全に左揃えにする方法を見つけようとしています非常に多くのピクセルに収まり、最後の数行がオーバーフローします。私たちが使用しているフォントはすでにイタリック体ですが、スキューを加えてもう少し押したいと思っています。完璧に見えるわけではないことはわかっていますが、私たちが望むものにはうまく機能します。

これを行う方法はありますか？すでに検索してみましたが、正しいものを探しているのか、それとも誰も気にしないものを探しているのかわかりません.

これが基本的なJSfiddle です

そしてひどいモックアップ...悪いモックアップ

そしてそれをテストするための基本的なコード...

CSSは次のとおりです。

.box {
width:600px;
height:300px;
background:#f1f1f1;
}
.box p {
 transform: skew(-20deg);
-ms-transform: skew(-20deg); /* IE 9 */
-moz-transform: skew(-20deg); /* Firefox */
-webkit-transform: skew(-20deg); /* Safari and Chrome */
-o-transform: skew(-20deg); /* Opera */ 
}

そしてHTML：

<div class="box">
    <p>Text here - more in the fiddle</p>
</div>

みんなありがとう！

4

1 に答える 1

1

これはばかげた質問かもしれませんが、単にイタリック体のテキストが必要ですか? その場合、あなたが言うようにフォントがデフォルトで斜体になっている場合は、単にskew完全に削除して.box pセレクターを指定してくださいfont-style: italic：

.box p {
    font-style: italic;
}

JSFiddle デモ。

ただし、テキストのコンテナーを歪ませたい場合は、コンテナー要素を導入して、そのskew上に を適用することができます。

<article>
    <p>...</p>
</article>

.box article {
    transform: skew(-20deg);
   -ms-transform: skew(-20deg); /* IE 9 */
   -moz-transform: skew(-20deg); /* Firefox */
   -webkit-transform: skew(-20deg); /* Safari and Chrome */
   -o-transform: skew(-20deg); /* Opera */ 
}

p次に、反対方向に同じ量だけ傾斜させることで、要素の傾斜に対抗するだけです。

.box article p {
    font-style: italic;
    transform: skew(20deg);
   -ms-transform: skew(20deg); /* IE 9 */
   -moz-transform: skew(20deg); /* Firefox */
   -webkit-transform: skew(20deg); /* Safari and Chrome */
   -o-transform: skew(20deg); /* Opera */ 
}

font-style: italicここで、テキストを斜体にするためにもう一度追加しました。

JSFiddle デモ。

于 2013-12-09T15:16:38.963 に答える