.ﺖﺳﺍ ﻩﺪﺷ ﺰﯾﺭﺮﺳ ﯼﺍﻮﺘﺤﻣ ﻪﻧﻮﮕﭼ ﻪﮐ ﺪﻨﮐﯽﻣ ﺺﺨﺸﻣ
:ﺩﺍﺩ ﺵﺮﺑ ﺍﺭ ﻥﺁ ﻥﺍﻮﺗ ﯽﻣ
This is some long text that will not fit in the box
:(...) ﺩﺮﮐ ﻪﺋﺍﺭﺍ ﯽﻀﯿﺑ ﺕﺭﻮﺻ ﻪﺑ ﺍﺭ ﻥﺁ ﻥﺍﻮﺗ ﯽﻣ ﺎﯾ
This is some long text that will not fit in the box
:ﺖﺳﺍ ﺮﯾﺯ ﺡﺮﺷ ﻪﺑ CSS ﺪﮐ
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h1>The text-overflow Property</h1>
<p>The following two paragraphs contains a long text that will not fit in the box.</p>
<h2>text-overflow: clip:</h2>
<p class="test1">This is some long text that will not fit in the box</p>
<h2>text-overflow: ellipsis:</h2>
<p class="test2">This is some long text that will not fit in the box</p>
</body>
</html>
:ﺪﯿﻫﺩ ﺶﯾﺎﻤﻧ ﺮﺼﻨﻋ ﯼﻭﺭ ﺱﻭﺎﻣ ﻥﺩﺍﺩ ﺭﺍﺮﻗ ﻡﺎﮕﻨﻫ ﺍﺭ ﻩﺪﺷ ﺰﯾﺭﺮﺳ ﯼﺍﻮﺘﺤﻣ ﺪﯿﻧﺍﻮﺗ ﯽﻣ ﻪﻧﻮﮕﭼ
div.test:hover {
overflow: visible;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
div.test {
white-space: nowrap;
width: 200px;
overflow: hidden;
border: 1px solid #000000;
}
div.test:hover {
overflow: visible;
}
</style>
</head>
<body>
<p>Hover over the two divs below, to see the entire text.</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<br>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
</body>
</html>
.ﺪﻧﺮﯿﮕﺑ ﺭﺍﺮﻗ ﯼﺪﻌﺑ ﻂﺧ ﺭﺩ ﻭ ﺪﻧﻮﺷ ﻪﺘﺴﮑﺷ ﻪﮐ ﺪﻫﺩ ﯽﻣ ﻩﺯﺎﺟﺍ ﯽﻧﻻﻮﻃ ﺕﺎﻤﻠﮐ ﻪﺑ :ﺪﺑﺎﯾ ﯽﻣ ﺵﺮﺘﺴﮔ ﺝﺭﺎﺧ ﺭﺩ ،ﺩﺮﯿﮕﻧ ﺭﺍﺮﻗ ﻪﻘﻄﻨﻣ ﮏﯾ ﺭﺩ ﻪﮐ ﺪﺷﺎﺑ ﯽﻧﻻﻮﻃ ﺪﺣ ﺯﺍ ﺶﯿﺑ ﯼﺍ ﻪﻤﻠﮐ This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line. :ﺪﺷﺎﺑ ﻪﻤﻠﮐ ﮏﯾ ﻂﺳﻭ ﺭﺩ ﻥﺁ ﻢﯿﺴﻘﺗ ﯼﺎﻨﻌﻣ ﻪﺑ ﺮﮔﺍ ﯽﺘﺣ - ﺪﯿﻨﮐ ﻥﺪﯿﭽﯿﭘ ﻪﺑ ﺭﻮﺒﺠﻣ ﺍﺭ ﻦﺘﻣ ﻪ This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line. :ﺖﺳﺍ ﺮﯾﺯ ﺡﺮﺷ ﻪﺑ CSS ﺪﮐ :ﺪﻧﺮﯿﮕﺑ ﺭﺍﺮﻗ ﯼﺪﻌﺑ ﻂﺧ ﺭﺩ ﻭ ﺪﻧﻮﺷ ﻪﺘﺴﮑﺷ ﯽﻧﻻﻮﻃ ﺕﺎﻤﻠﮐ ﺪﯿﻫﺩ ﻩﺯﺎﺟﺍ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ .ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻂﺧ ﺖﺴﮑﺷ ﻦﯿﻧﺍﻮﻗ This paragraph contains some text. This line will-break-at-hyphens. This paragraph contains some text. The lines will break at any character. :ﺖﺳﺍ ﺮﯾﺯ ﺡﺮﺷ ﻪﺑ CSS ﺪﮐ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ .rl-ﯼﺩﻮﻤﻋ ﻦﺘﺷﻮﻧ ﺖﻟﺎﺣ ﺎﺑ span ﺮﺼﻨﻋ ﺎﺑ ﻦﺘﻣ ﯼﺭﺍﺪﻘﻣ Some text with a span element with a vertical-rl writing-mode. :ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﻦﺘﺷﻮﻧ ﻒﻠﺘﺨﻣ ﺖﻟﺎﺣ ﺪﻨﭼ ﺮﯾﺯ ﻝﺎﺜﻣ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ :ﺪﻨﮐ ﯽﻣ ﺖﺳﺮﻬﻓ ﺍﺭ CSS ﻦﺘﻣ ﺖﮑﻓﺍ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﺮﯾﺯ ﻝﻭﺪﺟ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻩﺪﺷ ﻪﯿﺟﻮﺗ ﻦﺘﻣ ﯼﺭﺍﺬﮔ ﻪﻠﺻﺎﻓ ﻭ ﺯﺍﺮﺗ ﻩﻮﺤﻧ ﺩﻮﺷ ﻩﺩﺍﺩ ﻝﺎﻨﮕﯿﺳ ﺮﺑﺭﺎﮐ ﻪﺑ ﺪﯾﺎﺑ ﺩﻮﺷ ﯽﻤﻧ ﻩﺩﺍﺩ ﺶﯾﺎﻤﻧ ﻪﮐ ﯼﺍ ﻩﺪﺷ ﺰﯾﺭﺮﺳ ﯼﺍﻮﺘﺤﻣ ﻪﻧﻮﮕﭼ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ CJK ﺮﯿﻏ ﯼﺎﻫ ﺖﭙﯾﺮﮑﺳﺍ ﯼﺍﺮﺑ ﺍﺭ ﻂﺧ ﺖﺴﮑﺷ ﻦﯿﻧﺍﻮﻗ ﺪﻧﺮﯿﮕﺑ ﺭﺍﺮﻗ ﯼﺪﻌﺑ ﻂﺧ ﺭﺩ ﻭ ﺪﻧﻮﺷ ﻪﺘﺴﮑﺷ ﻪﮐ ﺪﻫﺩ ﯽﻣ ﻩﺯﺎﺟﺍ ﯽﻧﻻﻮﻃ ﺕﺎﻤﻠﮐ ﻪﺑ ﺪﻧﻮﺷ ﻩﺪﯿﭼ ﯼﺩﻮﻤﻋ ﺎﯾ ﯽﻘﻓﺍ ﺕﺭﻮﺻ ﻪﺑ ﻦﺘﻣ ﻁﻮﻄﺧ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﻝﺎﺜﻣ
p {
word-wrap: break-word;
}<!DOCTYPE html>
<html>
<head>
<style>
p.test {
width: 11em;
border: 1px solid #000000;
word-wrap: break-word;
}
</style>
</head>
<body>
<h1>The word-wrap Property</h1>
<p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
</body>
</html>
CSS ﻪﻤﻠﮐ ﻦﺘﺴﮑﺷ
ﻝﺎﺜﻣ
p.test1 {
word-break:
keep-all;
}
p.test2 {
word-break:
break-all;
}<!DOCTYPE html>
<html>
<head>
<style>
p.test1 {
width: 140px;
border: 1px solid #000000;
word-break: keep-all;
}
p.test2 {
width: 140px;
border: 1px solid #000000;
word-break: break-all;
}
</style>
</head>
<body>
<h1>The word-break Property</h1>
<p class="test1">This paragraph contains some text. This line will-break-at-hyphens.</p>
<p class="test2">This paragraph contains some text. The lines will break at any character.</p>
</body>
</html>
CSS ﻦﺘﺷﻮﻧ ﺖﻟﺎﺣ
ﻝﺎﺜﻣ
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode:
vertical-rl;
} <!DOCTYPE html>
<html>
<head>
<style>
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<h1>The writing-mode Property</h1>
<p class="test1">Some text with default writing-mode.</p>
<p>Some text with a span element with a <span class="test2">vertical-rl</span> writing-mode.</p>
<p class="test2">Some text with writing-mode: vertical-rl.</p>
</body>
</html>
CSS ﻦﺘﻣ ﻩﻮﻠﺟ ﯼﺎﻫ ﯽﮔﮋﯾﻭ