- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 9321 Articles for Object Oriented Programming
![Shubham Vora](https://www.tutorialspoint.com/assets/profiles/485898/profile/60_1456867-1657516792.jpeg)
4K+ Views
In this article, we will learn how to set the spacing between words in a text in JavaScript. Word spacing is critical on websites because it improves the legibility and readability of the text displayed on the page. You can generate an aesthetically pleasing and easyto-read typeface using proper word spacing. In JavaScript, we use the wordSpacing Property to set the spacing between the words in a text displayed on a website. Using the Style wordSpacing Property This JavaScript DOM property is used to get and set the spacing between the words in a text Depending on your needs, ... Read More
![Govinda Sai](https://www.tutorialspoint.com/assets/profiles/13542/profile/60_86497-1512650655.jpg)
169 Views
Use the wordbreak property in JavaScript to set line breaking rules for non-CJK scripts. The following are CJK scripts: C for Chinese, J for Japanese, K for Korean.ExampleYou can try to run the following code to learn how to implement wordbreak property − #box { width: 150px; height: 120px; background-color: lightblue; border: 1px solid black; } Set This is Demo Text.This is Demo Text.This is Demo Text.This is Demo Text.This is Demo Text.This is Demo Text. function display() { document.getElementById("box").style.wordBreak = "break-all"; }
![Shubham Vora](https://www.tutorialspoint.com/assets/profiles/485898/profile/60_1456867-1657516792.jpeg)
2K+ Views
In this tutorial, we shall learn to set when the transition effect starts with JavaScript. To set when the transition effect will start, use the JavaScript transitionDelay property. To make interactive components, we go for transition effects. Here let us get deeper into the topic and understand how we can set the transition start. Using the Style transitionDelay Property With Style transitionDelay property, we can set or return when the transition effect starts. We can specify the transitionDelay value in seconds(s) or milliseconds(ms). The delay can be either negative, positive, or zero. The transition effect starts immediately with a negative ... Read More
![Shubham Vora](https://www.tutorialspoint.com/assets/profiles/485898/profile/60_1456867-1657516792.jpeg)
1K+ Views
In this tutorial, we will learn how to handle tabs, line breaks, and whitespace in a text in JavaScript. To handle tabs, line breaks, and whitespace in text in JavaScript, we can use the whiteSpace property. This property has seven attributes − normal nowrap pre pre-line pre-wrap initial inherit Generally, in HTML we use the entity for multiple spaces and the tag to get line break. But in JavaScript, we use different attribute properties (mainly the normal and pre) of white-space properties to handle the tabs, line breaks, and multiple whitespaces. The details of these two ... Read More
![Nikitha N](https://www.tutorialspoint.com/assets/profiles/13558/profile/60_76068-1512713229.jpg)
113 Views
To set the duration for an effect to complete, use the transitionDuration property in JavaScript.ExampleYou can try to run the following code to return how many seconds or milliseconds a transition effect takes to complete − #div1 { position: relative; margin: 10px; height: 300px; width: 400px; padding: 20px; border: 2px solid blue; } #div2 { padding: 80px; position: absolute; border: 2px solid BLUE; background-color: yellow; transform: rotateY(45deg); transition: all 5s; } #div2:hover { background-color: orange; width: 50px; height: 50px; padding: 100px; border-radius: 50px; } Hover over DIV2 Set DIV1 DIV2 function display() { document.getElementById("myDIV").style.transitionDuration = "5s"; }
![Nitya Raut](https://www.tutorialspoint.com/assets/profiles/13573/profile/60_92249-1512715559.jpg)
99 Views
Use the transitionProperty in JavaScript to set the CSS property. You can try to run the following code to return the CSS property that the transition effect is for with JavaScript −Example #div1 { position: relative; margin: 10px; height: 300px; width: 400px; padding: 20px; border: 2px solid blue; } #div2 { padding: 80px; position: absolute; border: 2px solid BLUE; background-color: yellow; transform: rotateY(45deg); transition: all 3s; } #div2:hover { background-color: orange; width: 50px; height: 50px; padding: 100px; border-radius: 50px; } Hover over DIV2 Set DIV1 DIV2 function display() { document.getElementById("div2").style.transitionProperty = "width,height"; }
![Ramu Prasad](https://www.tutorialspoint.com/assets/profiles/13539/profile/60_87996-1512650215.jpg)
144 Views
To set the capitalization, use the textTransform property in JavaScript. Set it to capitalize, if you want the first letter of every word to be a capital letter.ExampleYou can try to run the following code to return the capitalization of a text with JavaScript − Capitalize Text This is demo text! This is demo text! function display() { document.getElementById("myID").style.textTransform = "capitalize"; }
![Sravani S](https://www.tutorialspoint.com/assets/profiles/13538/profile/60_67753-1512711355.jpg)
780 Views
To set the shadow effect, use the textShadow property in JavaScript.ExampleYou can try to run the following code to return the shadow effect of a text with JavaScript − Set Text Shadow This is Demo Text! This is Demo Text! This is This is Demo Text! This is Demo Text! This is Demo Text! This is Demo Text! This is Demo Text! This is Demo Text! This is Demo Text! This is Demo Text! This is Demo Text! function display() { document.getElementById("myID").style.textShadow = "2px 2px 2px #ff0000,20px 5px 2px #F1F1F1"; }
![Krantik Chavan](https://www.tutorialspoint.com/assets/profiles/13545/profile/60_126883-1512724834.jpg)
51 Views
Use the textOverflow property to counter the text overflow issue. Add ellipses if the text overflows the containing element.ExampleYou can try to run the following code to learn what is to be done when text overflows the containing element with JavaScript − #myID { border: 2px solid blue; background-color: gray; overflow: hidden; text-overflow: visible; width: 200px; ... Read More
![Shubham Vora](https://www.tutorialspoint.com/assets/profiles/485898/profile/60_1456867-1657516792.jpeg)
981 Views
In this tutorial, we shall learn to set the style of the line in a text decoration with JavaScript. To set the style of the line in JavaScript, use the textDecorationStyle property. You can set underline, double, or overline, etc. for the line style. Let us discuss our topic in brief. Using the Style textDecorationStyle Property We can set or return the line style in a text decoration with this property. The major browsers support this property. Firefox adds support with an alternate property named MozTextDecorationStyle. Syntax Following is the syntax to set the style of the line in ... Read More