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

CSSを使用したWordの間隔

CSSのword-spacingプロパティは、要素の単語間のスペースを指定するために使用されます。

構文

CSSの単語間隔プロパティの構文は次のとおりです-

Selector {
   word-spacing: /*value*/
}

例

次の例は、CSSの単語間隔プロパティ-

を示しています。 
<!DOCTYPE html>
<html>
<head>
<style>
div {
   display: flex;
   float: left;
   padding: 10px;
   background-color: salmon;
}
div > div {
   word-spacing: 30px;
   width: 340px;
   height: 140px;
   border-radius: 5%;
   box-shadow: inset 0 0 15px blueviolet;
}
</style>
</head>
<body>
<div>
<div>
Magento is an open source E-commerce software, created by Varien Inc., which is useful for 
online business. It has a flexible modular architecture and is scalable with many control 
options that is helpful for users.</div>
</div>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSを使用したWordの間隔

例

<!DOCTYPE html>
<html>
<head>
<style>
q {
   display: flex;
   padding: 10px;
   word-spacing: 6em;
   background-color: orange;
   font-size: 1.2em;
}
</style>
</head>
<body>
<h2>What is Java?</h2>
According to Java's official documentation,
<hr>
<q cite="https://www.java.com/en/download/faq/whatis_java.xml">Java is a programming language and computing platform first released by Sun Microsystems in 1995.</q>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSを使用したWordの間隔


  1. CSSwordspacingプロパティを使用した単語間の間隔の管理

    CSSのword-spacingプロパティを定義することで、単語間の空白の量を設定できます。 次の例は、CSSの単語間隔プロパティを示しています。 例 <!DOCTYPE html> <html> <head> <style> div {    margin: 2%;    padding: 2%;    background-color: mediumorchid;    color: ivory;    word-spacing: 2.2cm

  2. 純粋なCSSによるスムーズなスクロール

    CSSのscroll-behaviorプロパティを使用すると、スクロールの動作を変更できます。 例 次の例は、CSSのscroll-behaviorプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> html {    line-height: 200px;    margin: 30px;    text-align: center;    vertical-align: middle; } #parent {