Friday, January 15, 2021
  • Setup menu at Appearance » Menus and assign menu to Top Bar Navigation
Advertisement
  • AI Development
    • Artificial Intelligence
    • Machine Learning
    • Neural Networks
    • Learn to Code
  • Data
    • Blockchain
    • Big Data
    • Data Science
  • IT Security
    • Internet Privacy
    • Internet Security
  • Marketing
    • Digital Marketing
    • Marketing Technology
  • Technology Companies
  • Crypto News
No Result
View All Result
NikolaNews
  • AI Development
    • Artificial Intelligence
    • Machine Learning
    • Neural Networks
    • Learn to Code
  • Data
    • Blockchain
    • Big Data
    • Data Science
  • IT Security
    • Internet Privacy
    • Internet Security
  • Marketing
    • Digital Marketing
    • Marketing Technology
  • Technology Companies
  • Crypto News
No Result
View All Result
NikolaNews
No Result
View All Result
Home Learn to Code

CSS Ellipsis Beginning of String

January 8, 2019
in Learn to Code
How to Change the WordPress Admin Login Logo
587
SHARES
3.3k
VIEWS
Share on FacebookShare on Twitter

You might also like

navigator.clipboard API

Goals For 2021

Open a Browser Tab with DevTools Open by Default

I was incredibly happy when CSS text-overflow: ellipsis (married with fixed width and overflow: hidden was introduced to the CSS spec and browsers; the feature allowed us to stop trying to marry JavaScript width calculation with string width calculation and truncation.  CSS ellipsis was also very friendly to accessibility.


The CSS text-overflow: ellipsis feature is great but is essentially meant to ellipsize strings only at the end; what if we want to ellipsize the beginning of a screen?  The use case is fairly reasonable: think displaying a file path — many times the directory for a set of files is the same, in which case you’d want to display the end of the string, not the beginning.




Let me show you a trick for ellipsis at the begging of the string!


The CSS


Showing an ellipsis at the front of a string is mostly the same as ellipsis at the end, only with one simple trick:



.ellipsize-left {
    /* Standard CSS ellipsis */
    white-space: nowrap;                   
    overflow: hidden;
    text-overflow: ellipsis;  
    width: 200px;
    
    /* Beginning of string */
    direction: rtl;
    text-align: left;
}


To add an ellipsis at the beginning of a string, use RTL and and text-align to clip the beginning of the string!




Playing RTL off of text-align is a genius way to get the desired effect of CSS ellipsis at the beginning of an element or string.  It would be great for the CSS spec to implement a more robust ellipsis system but, for now, I worship amazing CSS tricks like this!

  • Create a Sheen Logo Effect with CSS
  • 9 Incredible CodePen Demos

    9 Incredible CodePen Demos

    CodePen is a treasure trove of incredible demos harnessing the power of client side languages.   The client side is always limited by what browsers provide us but the creativity and cleverness of developers always pushes the boundaries of what we think the front end can do.  Thanks to CSS…

  • Scrolling “Agree to Terms” Component with MooTools ScrollSpy

Credit: Source link

Previous Post

On demand data in Python, Part 3: Coroutines and asyncio

Next Post

Solving Sales & Marketing Alignment Challenges

Related Posts

How to Change the WordPress Admin Login Logo
Learn to Code

navigator.clipboard API

January 11, 2021
How to Change the WordPress Admin Login Logo
Learn to Code

Goals For 2021

December 29, 2020
How to Change the WordPress Admin Login Logo
Learn to Code

Open a Browser Tab with DevTools Open by Default

December 28, 2020
How to Change the WordPress Admin Login Logo
Learn to Code

Return a Default Value with Promises Using catch

December 23, 2020
How to Change the WordPress Admin Login Logo
Learn to Code

Break a forEach Loop with JavaScript

December 22, 2020
Next Post
Solving Sales & Marketing Alignment Challenges

Solving Sales & Marketing Alignment Challenges

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended

Plasticity in Deep Learning: Dynamic Adaptations for AI Self-Driving Cars

Plasticity in Deep Learning: Dynamic Adaptations for AI Self-Driving Cars

January 6, 2019
Microsoft, Google Use Artificial Intelligence to Fight Hackers

Microsoft, Google Use Artificial Intelligence to Fight Hackers

January 6, 2019

Categories

  • Artificial Intelligence
  • Big Data
  • Blockchain
  • Crypto News
  • Data Science
  • Digital Marketing
  • Internet Privacy
  • Internet Security
  • Learn to Code
  • Machine Learning
  • Marketing Technology
  • Neural Networks
  • Technology Companies

Don't miss it

Apologetic AI Is A Somewhat Sorry Trend, Especially For Autonomous Cars  
Artificial Intelligence

Apologetic AI Is A Somewhat Sorry Trend, Especially For Autonomous Cars  

January 15, 2021
Machine Learning

BlackRock invests in data science & machine learning | Corporate Finance

January 15, 2021
Toyota slapped with $180 million fine for violating Clean Air Act
Internet Security

Toyota slapped with $180 million fine for violating Clean Air Act

January 15, 2021
AI Research at Amazon: Brand Voice, Entanglement Frontier, Humor Recognition  
Artificial Intelligence

AI Research at Amazon: Brand Voice, Entanglement Frontier, Humor Recognition  

January 15, 2021
Machine Learning in Manufacturing Market 2020 Report Forecast By Global Industry Trends, Future Growth, Regional Overview
Machine Learning

Machine Learning in Manufacturing Market 2020 Report Forecast By Global Industry Trends, Future Growth, Regional Overview

January 15, 2021
More than 10mil users installed Android apps that showed out-of-context ads
Internet Security

More than 10mil users installed Android apps that showed out-of-context ads

January 15, 2021
NikolaNews

NikolaNews.com is an online News Portal which aims to share news about blockchain, AI, Big Data, and Data Privacy and more!

What’s New Here?

  • Apologetic AI Is A Somewhat Sorry Trend, Especially For Autonomous Cars   January 15, 2021
  • BlackRock invests in data science & machine learning | Corporate Finance January 15, 2021
  • Toyota slapped with $180 million fine for violating Clean Air Act January 15, 2021
  • AI Research at Amazon: Brand Voice, Entanglement Frontier, Humor Recognition   January 15, 2021

Subscribe to get more!

© 2019 NikolaNews.com - Global Tech Updates

No Result
View All Result
  • AI Development
    • Artificial Intelligence
    • Machine Learning
    • Neural Networks
    • Learn to Code
  • Data
    • Blockchain
    • Big Data
    • Data Science
  • IT Security
    • Internet Privacy
    • Internet Security
  • Marketing
    • Digital Marketing
    • Marketing Technology
  • Technology Companies
  • Crypto News

© 2019 NikolaNews.com - Global Tech Updates