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

CSSハイフンプロパティを使用してテキストにハイフンを追加する

CSSのハイフンの使用 プロパティでは、テキストにハイフンを追加する方法を指定できます。

例

次の例は、CSSハイフンプロパティを示しています。

<!DOCTYPE html>
<html>
<head>
<style>
div {
   width: 20%;
   border: 2px groove lime;
   margin: 10px;
   padding: 10px;
   hyphens: none;
   -webkit-hyphens: none;
   -ms-hyphens: none;
}
div:last-of-type {
   hyphens: manual;
   -webkit-hyphens: manual;
   -ms-hyphens: manual;
}
</style>
</head>
<body>
<div>
abcdefghi­jklmnopqrstuvwxyz
</div>
<div>
abcdefghi­jklmnopqrstuvwxyz
</div>
</body>
</html>

出力

これにより、次の結果が生成されます-

CSSハイフンプロパティを使用してテキストにハイフンを追加する

例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 10px;
   padding: 10px;
   width: 15%;
   border: 2px ridge darkblue;
   background-color: peachpuff;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
}
</style>
</head>
<body>
<div>
abcdefghijklmno-pqrstuvw-xyz
</div>
<div>
abcdefghi-jklmnopqrstuvw-xyz
</div>
</body>
</html>

出力

これにより、次の結果が生成されます-

CSSハイフンプロパティを使用してテキストにハイフンを追加する


  1. CSSのマージン短縮プロパティ

    CSSのmarginshorthandプロパティは、要素のマージン領域を定義するために使用されます。時計回りに値を設定します。つまり、margin-top、margin-right、margin-bottom、margin-leftの順に設定します。 構文 CSSマージンプロパティの構文は次のとおりです- Selector {    margin: /*value*/ } 次の例は、CSSマージンの短縮プロパティ-を示しています。 例 <!DOCTYPE html> <html> <head> <style> div {

  2. CSSのborder-styleプロパティ

    CSS border-styleプロパティは、要素の境界線スタイルを指定するために使用されます。また、border-topスタイル、border-rightスタイル、border-leftスタイル、border-rightスタイルのプロパティを使用して、個々の辺の境界線スタイルを定義することもできます。 構文 CSSボーダープロパティの構文は次のとおりです- Selector {    border: /*value*/ } 次の例は、CSSボーダースタイルのプロパティ-を示しています。 例 <!DOCTYPE html> <html> <