search

Home  >  Article  >  Web Front-end  >  Getting Started CSS Truncate expansion on hover or focus

Getting Started CSS Truncate expansion on hover or focus

WBOY
WBOYforward
2023-08-25 21:45:02983browse

入门 CSS 悬停或焦点时截断展开

Text display is an important factor in web design, which affects the user experience and the readability of the website. If your text is displayed correctly in an organized manner, users will easily understand it and thus be attracted to your website. Sometimes, however, text can be too long for the designated space on a web page. To display this text correctly, we use the truncate method. Primer CSS provides this method where you can not only truncate text but also extend it with hover or focus effects. In this article we will discuss how this works and the classes that enable us to do this.

CSS Getting Started

Primer CSS is a powerful open source CSS framework that enables developers to create consistent and professional front-ends for web applications and websites. It is designed by GitHub Design System. It provides a versatile set of built-in components such as typography, buttons, alerts, truncation, menus, navigation, etc. that are easy to use and save a lot of time. In addition, it provides detailed documentation for beginners to get started at any time. It has predefined classes for truncating overflowing text in web pages.

Before using any class in Primer CSS, we must install it from npm -

npm install --save @primer/css

Or use CDN link in HTML code -

<link href= "https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel= "stylesheet" />

Truncate expansion when hovering or in focus state

To expand truncated text on hover or focus state, Primer CSS has built-in classes. These classes are as follows -

  • Truncate-text - Used to truncate any text

  • Truncate-text--expandable - Used to expand truncated text on hover or focus.

Example

In this example, we use the predefined box class to convert a div element into a resizable box. Here, p-1 is a class shorthand for adding 4px (0.25 rem) of padding on all sides of the box.

Next, we have the style attribute which is used to add the desired style to the box. We set the value of the resize property to horizontal so that the user can resize the box horizontally simply by dragging it from the right corner. To add a horizontal scrollbar to an element, we use the "overflow:scroll" attribute. Using horizontal scroll bars will allow users to see hidden content when scrolling text horizontally.

Next, we create an element that contains an anchor tag that will be truncated to fit inside the box. Truncate-text is a class defined to truncate text inside an anchor tag, while Truncate-text--expandable class is built-in to enable the user to truncate text whenever it hovers over or When focused, truncated text is expanded. 

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
</head>
<body>
   <h1 style="margin: 10px"> Primer CSS Truncate Expand on hover or focus state </h1>
   <p style="margin: 10px"> Following we have different truncated text which expands on hovering. </p>
   <br>
   <div class="Box p-1" style="resize: horizontal; overflow: scroll; margin: 10px">
      <div class="Truncate">
         <a href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django Bootstrap Tailwind NextJs Typescript Java ExpressJs Vue.Js Laravel </a>
         <a href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django Bootstrap Tailswind NextJs Typescript Java ExpressJs VueJs Laravel </a>
         <a href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django Bootstrap Tailswind NextJs Typescript Java ExpressJs VueJs Laravel </a>
         <a href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django Bootstrap Tailswind NextJs Typescript Java ExpressJs VueJs Laravel </a>
      </div>
   </div>
</body>
</html>

Example

In this example, we added truncated text that expands on hover or focus inside the div element. 

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
</head>
<body>
   <h1 style="margin: 10px"> Primer CSS Truncate Expand on hover or focus state </h1>
   <p style="margin: 15px"> Following we have different truncated text which expands on hovering. </p>
   <br>
   <div class="Box p-1" style="resize: horizontal; overflow: scroll; margin: 15px">
      <div class="Truncate">
         <div href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django </div>
         <div href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django </div>
         <div href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django </div>
         <div href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django </div>
      </div>
   </div>
</body>
</html>

in conclusion

In this article, we learned how to properly display text in a visually appealing way when space is limited. We use the truncation method, which can be easily done using Primer CSS. Additionally, creating expandable truncated text will allow users to access information when needed without affecting the overall look and feel of the website. This makes your website user-friendly and professional.

The above is the detailed content of Getting Started CSS Truncate expansion on hover or focus. For more information, please follow other related articles on the PHP Chinese website!

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Additional color properties provided by CSS3Next article：Additional color properties provided by CSS3

Related articles

See more