revision:
none: no hyphen; overflow if neededmanual: hyphen only at ‐ or ­ (if needed)auto: hyphens where the algorithm decides (if needed)
<dl class="grid_B">
<div>
<dt><code>none</code>: no hyphen; overflow if needed</dt>
<dd lang="en" class="none">An extremely long English word</dd>
</div>
<div>
<dt><code>manual</code>: hyphen only at ‐ or ­ (if needed)</dt>
<dd lang="en" class="manual">An extremely long English word</dd>
</div>
<div>
<dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
<dd lang="en" class="auto">An extremely long English word</dd>
</div>
</dl>
<style>
dd{width: 5.5vw; border: 1px solid black;}
code{font-size:1.5vw; font-weight:bold;}
dd.none{-webkit-hyphens: none; -ms-hyphens: none; hyphens: none;}
dd.manual{-webkit-hyphens: manual;-ms-hyphens: manual; hyphens: manual;}
dd.auto {-webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
</style>
This text is having space between letters.
This is sentence number 1
This is sentence number 2
This is sentence number 3
<p style = "letter-spacing:5px;">This text is having space between letters.</p>
<p style = "letter-spacing:7px;" >This is sentence number 1</p>
<p style = "letter-spacing:9px;">This is sentence number 2</p>
<p style = "letter-spacing:-1px;">This is sentence number 3</p>
no tab
default tab size of 8 characters wide
custom tab size of 3 characters wide
3 spaces, equivalent to the custom tab size
<p>no tab</p>
<p> & #0009; default tab size of 8 characters wide</p>
<p class="custom"> & #0009;custom tab size of 3 characters wide</p>
<p>& nbsp;& nbsp;& nbsp;3 spaces, equivalent to the custom tab size</p>
<style>
.custom {tab-size: 3; -moz-tab-size: 3;}
</style>
This will be right aligned.
This will be center aligned.
This will be left aligned.
<p style = "text-align:right;">This will be right aligned.</p>
<p style = "text-align:center;">This will be center aligned.</p>
<p style = "text-align:left;">This will be left aligned.</p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<p id="one">Lorem Ipsum is dummy text. . . . </p>
<style>
.one{text-align: justify; -moz-text-align-last: right; text-align-last: right;}
</style>
This text will have first line indented by 1cm and this line will remain at its actual position. This is done by CSS text-indent property.
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
<p style="text-indent:1cm;">This text will have . . . </p>
<p style="text-indent:3cm;">In my younger and more . . . .</p>
NONE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.
AUTO
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.
DISTRIBUTE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.
INTER_WORD
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.
INTER_CHARACTER
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.
<div>
<p class="none2">NONE<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam.
Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
<p class="auto2">AUTO<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam.
Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
<p class="dist">DISTRIBUTE<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam.
Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
<p class="word">INTER_WORD<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam.
Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
<p class="char">INTER_CHARACTER<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam.
Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
</div>
<style>
.none2{font-size: 1vw; border: 1px solid green; padding: 1vw; width: 95%; margin: 1vw auto; text-align: justify; text-justify: none;}
.auto2{font-size: 1vw; border: 1px solid green; padding: 1vw; width: 95%; margin: 1vw auto; text-align: justify; text-justify: auto;}
.dist{font-size: 1vw; border: 1px solid green; padding: 1vw; width: 95%; margin: 1vw auto; text-align: justify; text-justify: distribute;}
.word{font-size: 1vw; border: 1px solid green; padding: 1vw; width: 95%; margin: 1vw auto; text-align: justify; text-justify: inter-word;}
.char{font-size: 1vw; border: 1px solid green; padding: 1vw; width: 95%; margin: 1vw auto; text-align: justify; text-justify: inter-character;}
</style>
This will be capitalized
This will be in uppercase
This will be in lowercase
<p style = "text-transform:capitalize;">This will be capitalized</p>
<p style = "text-transform:uppercase;">This will be in uppercase</p>
<p style = "text-transform:lowercase;">This will be in lowercase</p>
This text has a line break and the white-space pre setting
tells the browser to honor it just like the HTML pre tag.
<style>
<p style = "white-space:pre;">This text has a line break and the white-space pre setting <br>
tells the browser to honor it just like the HTML pre tag.</p>
</style>
NORMAL
Thisissomeveryveryverylong word. Words will break according to usual rules.
KEEP_ALL
Thisissomeveryveryverylong word. This text will-break-at-hyphens.
BREAK_ALL
Thisissomeveryveryverylong word. This text will break at any character.
<p class="a">NORMAL<br> Thisissomeveryveryverylong word. Words will break according to usual rules.</p>
<p class="b">KEEP_ALL<br>Thisissomeveryveryverylong word. This text will-break-at-hyphens.</p>
<p class="c">BREAK_ALL<br>Thisissomeveryveryverylong word. This text will break at any character.</p>
<style>
p.a {width: 10vw; border: 1px solid #000000; word-break: normal;}
p.b {width: 10vw; border: 1px solid #000000;word-break: keep-all;}
p.c {width: 10vw; border: 1px solid #000000;word-break: break-all;}
</style>
This text is having space between words.
<style>
<p style = "word-spacing:5px;">This text is having space between words.</p>
</style>
The text-overflow CSS property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (...), or display a custom string. Both of the following properties are required for text-overflow:
"white-space: nowrap;"
"overflow: hidden;"
The "text-overflow property" only affects content that is overflowing a block container element in its inline progression direction (not text overflowing at the bottom of a box, for example).
text-overflow: clip|ellipsis|string|initial|inherit;
property values:
clip: default value; the text is clipped and not accessible.
ellipsis: render an ellipsis ("...") to represent the clipped text.
string: render the given string to represent the clipped text.
initial: sets this property to its default value.
inherit: inherits this property from its parent element.
The text-overflow property may be specified using one or two values. If one value is given, it specifies overflow behavior for the end of the line (the right end for left-to-right text, the left end for right-to-left text). If two values are given, the first specifies overflow behavior for the left end of the line, and the second specifies it for the right end of the line.
syntax examples:
text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";
/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: unset;
The following two divs contains a text that will not fit in the box.
Note: The text-overflow: "string" only works in Firefox.
<style>
.a, .b, .c{margin-left:4vw;}
div.a {white-space: nowrap; width: 5vw; overflow: hidden; text-overflow: clip;
border: 1px solid #000000;}
div.b {white-space: nowrap; width: 5vw; overflow: hidden; text-overflow: ellipsis;
border: 1px solid #000000;}
div.c {white-space: nowrap; width: 5vw; overflow: hidden; text-overflow: "----";
border: 1px solid #000000;}
</style>
<p class="spec">The following two divs contains a text that will not fit in the box.</p>
<h4>text-overflow: clip (default):</h4>
<div class="a">Hello world!</div>
<h4>text-overflow: ellipsis:</h4>
<div class="b">Hello world!</div>
<h4>text-overflow: "----" (user defined string):</h4>
<div class="c">Hello world!</div>
<p class="spec"><strong>Note:</strong> The text-overflow: "<em>string</em>" only
works in Firefox.</p>
clip clip
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
clip ellipsis
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
ellipsis ellipsis
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
ellipsis " [..]"
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<style>
.formatting p {margin-left:2vw; width: 20vw; border: 1px solid; padding: 0.2vw 0.5vw;
/* Both of the following are required for text-overflow */ white-space: nowrap;
overflow: scroll;}
.overflow-clip-clip {text-overflow: clip clip;}
.overflow-clip-ellipsis {text-overflow: clip ellipsis;}
.overflow-ellipsis-ellipsis {text-overflow: ellipsis ellipsis;}
.overflow-ellipsis-string {text-overflow: ellipsis " [..]";}
</style>
<script>
// Scroll each paragraph so the start is also hidden
const paras = document.querySelectorAll("p");
for (let para of paras) {
para.scroll(100, 0);
}
</script>
<div class="formatting">
<pre style="margin-left:3vw; border: none">clip clip</pre>
<p class="spec overflow-clip-clip; border: none">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<pre style="margin-left:3vw; border: none;">clip ellipsis</pre>
<p class="spec overflow-clip-ellipsis; border: none">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<pre style="margin-left:3vw; border: none;">ellipsis ellipsis</pre>
<p class="spec overflow-ellipsis-ellipsis; border: none">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<pre style="margin-left:3vw; border: none;">ellipsis " [..]"</pre>
<p class="spec overflow-ellipsis-string; border: none">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
The text-decoration CSS property is used to decorate the content of the text. It can add lines above, under, and through the text. It decorates the text with several kinds of lines. It is the shorthand for "text-decoration-line", "text-decoration-color", and "text-decoration-style".
The property text-decoration-line is used to underline the text. It has three values that are "overline", "underline", or "line-through". The value "underline" is used to underline the text in CSS and draws the underline beneath the inline text.
There is no CSS property to apply an underline only to individual words in a sentence or an element with multiple words. The best way to achieve this is by wrapping the underlined words in a span element and then apply the underline to those spans.
However, the default underline is inconsistent across browsers. Each browser chooses its own default thickness and vertical position (offset from the baseline) for the underline.
There are two new, widely supported CSS properties that allow to precisely define the thickness and offset for our underlines:
the text-decoration-thickness property sets the stroke thickness of the decoration line that is used on text in an element.
the text-underline-offset property sets the distance of text underlines from their initial position. Once you apply an underline for an element using text-decoration with the value of underline, you can say how far that line should be from your text using the "text-underline-offset property".
With these properties, we can create consistent underlines even across two very different browsers, such as the Gecko-based Firefox on Android and the WebKit-based Safari on macOS.
property values:
auto: (default) allows the browser to specify an appropriate thickness for the text decoration line.
from-font: if the first available font has metrics specifying a preferred thickness, it uses that thickness; otherwise it behaves like the auto value.
length: any valid length with a unit specifies the thickness of text decoration lines as a fixed length. This replaces any information in the font and the browser default.
percentage: specifies the thickness of text decoration lines as a percentage of 1em in the element's font.
initial: the default setting of the property, which is auto.
inherit: adopts the decoration thickness value of the parent.
unset: removes the current thickness from the element.
syntax examples
/* Single keyword */
text-decoration-thickness: auto;
text-decoration-thickness: from-font;
/* length */
text-decoration-thickness: 0.1em;
text-decoration-thickness: 3px;
/* percentage */
text-decoration-thickness: 10%;
/* Global values */
text-decoration-thickness: inherit;
text-decoration-thickness: initial;
text-decoration-thickness: revert;
text-decoration-thickness: unset;
After setting a decoration for an element, all its children will have that decoration too.
For this property, a length will inherit as a fixed value, and will not scale with the font. A percentage will inherit as a relative value and, therefore, scale with changes in the font as it inherits.
property values:
auto: (default) the browser will specify an appropriate offset for underlines.
length: any valid length with a specified unit (including negative values). This replaces any information in the font and the browser default.
percentage: specifies the offset of underlines as a percentage of 1em in the element's font
initial: the default setting of the property, which is auto.
inherit: adopts the underline offset value of the parent.
unset: removes the current offset from the element.
syntax examples
/* Single keyword */
text-underline-offset: auto;
/* length */
text-underline-offset: 0.1em;
text-underline-offset: 3px;
/* percentage */
text-underline-offset: 20%;
/* Global values */
text-underline-offset: inherit;
text-underline-offset: initial;
text-underline-offset: revert;
text-underline-offset: unset;
text-underline-offset is not part of the shorthand of text-decoration. It doesn't work on other text-decoration lines, such as line-through or overline. Negative values are accepted, which offsets the underline inward. Once you set a decoration for an element, all its children will have that decoration too.
Hi, welcome to this website. This site is developed to let you know more about my favorite activities: photos and learning coding. This is an early endeavor from my side and I'm well aware that this web site can be improved.
<style>
h4 {margin-left: 4vw;color: blue;}
#p1 {font-size: 1.2vw; text-decoration: underline; text-decoration-color: blue;}
</style>
<h4 class="h4">Welcome to my website</h4>
<div>
<p id="p1"> Hi, welcome to this website. This site is developed to let you know more about my favorite activities:
photos and learning coding. This is an early endeavor from my side and I'm well aware that this web site can be improved.
</p>
</div>
<div>
<style>
.h4-1 {display: block; font-size: 2em; color: hsl(207, 90%, 54%); text-decoration: underline solid blue 1px;}
@supports not (text-decoration: solid blue 1px) {
h4::after {content: "Your browser doesn't support text-decoration-thickness in text-decoration.";
display: block; color: #e43; margin-top: 1vw; font-weight: bold;text-decoration: unset; font-size: 1vw;}
}
</style>
<h4>Salutations, <span>my friend</span></h4>
</div>
Here's some text with an offset wavy red underline!
This text has lines both above and below it. Only the bottom one is offset.
<style>
.oneline {text-decoration: underline wavy red; text-underline-offset: 1em;}
.twolines {text-decoration-color: purple; text-decoration-line: underline
overline;}
</style>
<p class="spec oneline">Here's some text with an offset wavy red underline!</p>
<br>
<p class="spec twolines">This text has lines both above and below it. Only the
bottom one is offset.</p>
<style>
h4-2 {width: 20vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2vw; resize: horizontal; background: teal; color: #fff; font-family: Roboto, "Helvetica Neue",Arial,sans-serif;
display: flex; justify-content: left; align-items: left;}
</style>
Morbi rutrum lectus turpis, sit amet sollicitudin eros condimentum vitae. Integer consequat eros vel tortor tempor, et vulputate turpis pretium. Suspendisse vel metus sem. Aenean sollicitudin luctus est ac gravida. Curabitur eros tellus, scelerisque sit amet suscipit consequat, laoreet at quam. Nullam massa ante, tincidunt quis metus ut, consequat facilisis risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis velit sit amet dui semper dignissim. More dynamic text here.
<div>
<div class="line-clamp">
<p>Morbi rutrum lectus turpis, sit amet sollicitudin eros condimentum vitae... nascetur ridiculus mus.</p>
</div>
<p class="line-clamp2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit... dignissim. More dynamic text here.</p>
</div>
<style>
.line-clamp{width: 30vw; overflow: hidden; display: block; display: -webkit-box; -webkit-line-clamp: 4;-webkit-box-orient: vertical; line-clamp:4; margin: 0 auto;}
.line-clamp2{width: 20vw; overflow: hidden; display: block; display: -webkit-box; -webkit-line-clamp: 3;-webkit-box-orient: vertical; line-clamp:3; margin: 0 auto;}
</style>
Morbi rutrum lectus turpis, sit amet sollicitudin eros condimentum vitae. Integer consequat eros vel tortor tempor, et vulputate turpis pretium. Suspendisse vel metus sem. Aenean sollicitudin luctus est ac gravida. Curabitur eros tellus, scelerisque sit amet suscipit consequat, laoreet at quam. Nullam massa ante, tincidunt quis metus ut, consequat facilisis risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Morbi rutrum lectus turpis, sit amet sollicitudin eros condimentum vitae. Integer consequat eros vel tortor tempor, et vulputate turpis pretium. Suspendisse vel metus sem. Aenean sollicitudin luctus est ac gravida. Curabitur eros tellus, scelerisque sit amet suscipit consequat, laoreet at quam. Nullam massa ante, tincidunt quis metus ut, consequat facilisis risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<style>
.truncate-overflow{--max-lines: 4; position: relative; width: 30vw; max-height: calc(var(--lh) * var(--max-lines)); overflow: hidden; margin: 0 auto;}
.truncate-overflow::before{position: absolute; content: "..."; bottom: 0; right: 1vw; z-index: 1;}
.truncate-overflow::after{content: ""; position: absolute; bottom: 0; right: 1vw; width: 1vw; height: 1vw; background: skyblue; z-index: 0;}
</style>
<div class="truncate-overflow">
<p>Morbi rutrum lectus turpis, sit amet sollicitudin eros condimentum vitae. Integer consequat eros vel tortor tempor, et vulputate turpis pretium. Suspendisse vel metus sem.
Aenean sollicitudin luctus est ac gravida. Curabitur eros tellus, scelerisque sit amet suscipit consequat, laoreet at quam. Nullam massa ante, tincidunt quis metus ut, consequat
facilisis risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Morbi rutrum lectus turpis, sit amet sollicitudin eros condimentum vitae.
Integer consequat eros vel tortor tempor, et vulputate turpis pretium. Suspendisse vel metus sem. Aenean sollicitudin luctus est ac gravida. Curabitur eros tellus, scelerisque sit
amet suscipit consequat, laoreet at quam. Nullam massa ante, tincidunt quis metus ut, consequat facilisis risus. Orci varius natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.</p>
</div>
<style>
.truncate-overflow{--max-lines: 4; position: relative; width: 30vw; max-height: calc(var(--lh) * var(--max-lines)); overflow: hidden; margin: 0 auto;}
.truncate-overflow::before{position: absolute; content: "..."; bottom: 0; right: 1vw; z-index: 1;}
.truncate-overflow::after{content: ""; position: absolute; bottom: 0; right: 1vw; width: 1vw; height: 1vw; background: skyblue; z-index: 0;}
</style>
<details class="spec">
<summary>code:</summary>
<pre>
<style>
.truncate-overflow{--max-lines: 4; position: relative; width: 30vw; max-height: calc(var(--lh) * var(--max-lines)); overflow: hidden; margin: 0 auto;}
.truncate-overflow::before{position: absolute; content: "..."; bottom: 0; right: 1vw; z-index: 1;}
.truncate-overflow::after{content: ""; position: absolute; bottom: 0; right: 1vw; width: 1vw; height: 1vw; background: skyblue; z-index: 0;}
</style>
</pre>
</details><br>
<h3>4- using different techniques to truncate text</h3>
<div data-title="This is a Longer text which needs to be shown with ... and show full on hover">This is a Longer Text...</div>
<div class="flex-parent">
<div class="flex-child long-and-truncated">
1. This is a long string that is OK to truncate. Do it. Thank you.
</div>
<div class="flex-child short-and-fixed">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div>
<div class="flex-parent has-child">
<div class="flex-child long-and-truncated-with-child">
<h5>2. This is a long string that is OK to truncate. Do it. Thank you.</h5>
</div>
<div class="flex-child short-and-fixed">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div class="flex-parent has-child">
<div class="flex-child long-and-truncated-with-child-corrected">
<h5>3. This is a long string that is OK to truncate. Do it. Thank you.</h5>
</div>
<div class="flex-child short-and-fixed">
<div></div>
<div></div>
<div></div>
</div>
</div>
<style>
[data-title] {font-size: 1vw; position: relative; cursor: help; margin-left: 3vw; margin-bottom: 4vw;}
[data-title]:hover::before {content: attr(data-title); position: absolute; bottom: -4.6vw; padding: 1vw; background: #000; color: #fff; font-size: 1vw; white-space: nowrap;}
[data-title]:hover::after {content: ''; position: absolute; bottom: -1.2vw; left: 0.8vw; border: 0.8vw solid transparent; border-bottom: 0.8vw solid #000;}
.flex-parent{display: flex; align-items: center; padding: 1vw; margin: 1vw 0; width: 30vw;}
.flex-child{margin-left: 2vw;}
.long-and-truncated {flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.long-and-truncated-with-child{flex: 1;}
.long-and-truncated-with-child h5{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.short-and-fixed{ white-space: nowrap;}
.short-and-fixed > div { width: 1vw; height: 1vw; border-radius: 0.5vw; background: lightgreen; display: inline-block;}
.long-and-truncated-with-child-corrected{flex: 1; min-width: 0; }
.long-and-truncated-with-child-corrected h5{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
</style>
Different functions used to enable truncation
<div>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
<script>
text_truncate = function(str, length, ending) {
if (length == null) {
length = 100;
}
if (ending == null) {
ending = '...';
}
if (str.length > length) {
return str.substring(0, length - ending.length) + ending;
} else {
return str;
}
};
res = text_truncate("Lorem Ipsum placeholder text in any number of characters,
words sentences or paragraphs", 13);
res1 = text_truncate("Lorem Ipsum placeholder text in any number of characters,
words sentences or paragraphs", 19);
res2 = text_truncate("Lorem Ipsum placeholder text in any number of characters,
words sentences or paragraphs", 23);
document.getElementById("one").innerHTML = res;
document.getElementById("two").innerHTML = res1;
document.getElementById("three").innerHTML = res2;
</script>
<div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
</div>
<script>
function truncateString(str, num) {
if (num > str.length){
return str;
} else{
str = str.substring(0,num);
return str+"... ";
}
}
res3 = truncateString("What goes up has to come down. Gravity at its best", 11);
res4 = truncateString("What goes up has to come down. Gravity at its best", 21);
res5 = truncateString("What goes up has to come down. Gravity at its best", 31);
document.getElementById("four").innerHTML = res3
document.getElementById("five").innerHTML = res4
document.getElementById("six").innerHTML = res5
</script>
<div id="seven" style="margin-left: 3vw;"></div>
<script>
function truncateString(str, num) {
if (str.length <= num) {
return str
}
return str.slice(0, num) + '...'
}
resA = truncateString("What goes up has to come down. Gravity at its best", 9);
document.getElementById("seven").innerHTML = resA
</script>
<div>
<div id="eight"></div>
<div id="nine"></div>
</div>
<script>
function truncate(str, no_words) {
return str.split(" ").splice(0,no_words).join(" ");
}
document.getElementById("eight").innerHTML = truncate('The quick brown fox jumps
over the lazy dog', 4);
document.getElementById("nine").innerHTML = truncate('The quick brown fox jumps
over the lazy dog', 7) + "...";
</script>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
<div class="white">
<h4>white-space: nowrap:</h4>
<p class="a">
This is some text. This is some text. This is some text.<br>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.<br>
This is some text. This is some text. This is some text.
</p>
<h4>white-space: normal:</h4>
<p class="b">
This is some text. This is some text. This is some text.<br>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.<br>
This is some text. This is some text. This is some text.
</p>
<h4>white-space: pre:</h4>
<p class="c">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
<h4>white-space: pre-wrap:</h4>
<p class="d">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
<h4>white-space: pre-line:</h4>
<p class="e">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
<h4>white-space: break-spaces:</h4>
<p class="f">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</div>
<style>
.white{width:30vw;}
p.a{white-space: nowrap;}
p.b{white-space: normal;}
p.c{white-space: pre;}
p.d{white-space: pre-wrap;}
p.e{white-space: pre-line;}
p.f{white-space: break-spaces;}
</style>
Click the "Try it" button to make sure that the text inside the DIV element never wraps:
<div>
<p><b>1_</b> Click the "Try it" button to make sure that the text inside the DIV element never wraps:</p>
<button onclick="whiteSpace()">Try it</button>
<button onclick="reset()">Reset</button>
<div class="spec-2" id="myDIV">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
<style>
#myDIV {width: 30vw; height: 10vw; background-color: lightblue; border: 0.1vw solid black;}
button{background-color:salmon; font-size: 1vw; width: 13vw;}
</style>
<script>
function whiteSpace() {
document.getElementById("myDIV").style.whiteSpace = "nowrap";
}
function reset(){
document.getElementById('myDIV').style.whiteSpace = "normal";
}
</script>
<div id="myDiv1" class="spec" style="white-space:nowrap;">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.<br>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.<br>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.<br>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>
<br>
<button id="button1" type="button" onclick="whiteSpace1()">
Return the whiteSpace property (alert!!)</button>
<style>
#myDIV1 {width: auto; height: 20vw; background-color: lightblue;
border: 0.1vw solid black;}
#button1{background-color:salmon; font-size: 1vw; width: 23vw;}
</style>
<script>
function whiteSpace1() {
alert(document.getElementById("myDiv1").style.whiteSpace);
}
</script>
<div>
<div id="myDiv2"><b>3_</b> Lorem ipsum sit dicunt verterem dissentiet eu. Cu vero suscipiantur deterruisset mea, nostro nonummy reprimique sea id.<br /> Id pri fabellas quaestio delicatissimi,
eum at dictas patrioque constituam, ius ut elit legimus eloquentiam.<br /> Ut mei omnium oblique, est vero cibo nonummy te.</div>
<br />
<label for="whitespace"></label>
<select id="whitespace" size="3" onchange="ChangeWhiteSpace (this);">
<option selected="selected" />normal
<option />nowrap
<option />pre
</select>
</div>
<style>
#myDiv2{width:24vw; border:1px solid #FF0000; white-space:normal;}
select{width: 10vw; background-color: salmon;}
</style>
<script>
function ChangeWhiteSpace (selectTag) {
// Returns the index of the selected option
var whichSelected = selectTag.selectedIndex;
// Returns the text of the selected option
var spaceValue = selectTag.options[whichSelected].text;
var div = document.getElementById ("myDiv2");
div.style.whiteSpace = spaceValue;
}
</script>