CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS3を使用して単語違反ルールを指定する

CSS3で単語分割ルールを指定するには、word-breakプロパティを使用します。このプロパティは、線を切るために使用されます。可能な値には、normal、break-all、keep-all、break-wordなどがあります。

以下は、CSS3-

を使用して単語違反ルールを指定するためのコードです。

例

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
span {
   display: inline-block;
   font-weight: bold;
   font-size: 20px;
   margin-right: 20px;
}
div {
   width: 50px;
   border: 3px solid #3008c0;
   margin: 10px;
   padding: 10px;
   font-size: 18px;
   display: inline-block;
   margin-right: 20px;
}
.normal {
   word-break: normal;
}
.break-all {
   word-break: break-all;
}
.break-word {
   word-break: break-word;
}
</style>
</head>
<body>
<h1>Word Breaking Rules Example</h1>
<span>NORMAL </span> <span>BREAK ALL</span> <span>BREAK WORD</span>
<br />
<div class="normal">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div class="break-all">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div class="break-word">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
</body>
</html>

出力

上記のコードは次の出力を生成します-

CSS3を使用して単語違反ルールを指定する


  1. CSS3を使用した要素の2D変換

    2D変換は、平行移動、回転、拡大縮小、傾斜などの要素構造を再変更するために使用されます。 以下は、2D変換関数の一部です- Sr.No。 値と説明 1 matrix（n、n、n、n、n、n） 6つの値を持つ行列変換を定義するために使用されます 2 translate（x、y） x軸とy軸とともに要素を変換するために使用されます 3 translateX（n） x軸とともに要素を変換するために使用されます 4 translateY（n） y軸とともに要素を変換するために使用されます 5 scale（x、y） 要

  2. Pythonを使用してWordCloudを作成する

    この問題では、いくつかのテキストを含むファイルがあります。これらのテキストと1つのマスキング画像からワードクラウドを作成する必要があります。プログラムは、単語の雲の画像を pngとして保存します フォーマット。 この問題を実装するには、Pythonのいくつかのライブラリを使用する必要があります。ライブラリはmatplotlib、wordcloud、numpy、tkinter、PILです。 これらのライブラリをインストールするには、次のコマンドに従う必要があります- ライブラリのセットアップ $ sudo pip3 install matplotlib $ sudo pip3 instal