Trim a string Using css - css

Question

I want to Trim a string Using css .
example
my string is
"hi google how are you"
I Want to Get output
"hi"
Get first two letter . Using Css is it possible Trim a string .

Answer 1

Although not possible using CSS; but you can get some kind of illusion in ideal condition may be this workaround work for you. I've used here text-overflow: ellipsis;
you can check the DEMO.
<p>hi google how are you</p>
p {
text-overflow: ellipsis; /* IE, Safari (WebKit) */
overflow:hidden; /* don't show excess chars */
white-space:nowrap; /* force single line */
width: 17px; /*This property playing a major role just showing the first 2 letter*/
}

Answer 2

I'm not quite sure why you wanna do it with CSS (it makes more sense to this this with JS or your back-end server side language), I presume it's because you want to target one screen size with say the full sentence and another with an abbreviated one? If so, sadly CSS can't do this, however you could do something like this in your HTML:
<span class="widescreen-span">[pull full string here]</span>
<span class="smallscreen-span">[trimmed string here]</span>
Where you actually have both sets of text available in the HTML, however we will show and hide them accordingly.
Then have a stylesheet for each screen size (there are several ways of doing this...):
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
Then in widescreen.css you could do this:
.widescreen-span { display:inline; }
.smallscreen-span { display:none; }
And then in smallscreen.css you could do this:
.widescreen-span { display:none; }
.smallscreen-span { display:inline; }

Answer 3

AFAIK: There's no way to do that in CSS. The only way to achieve what you want is using some script language (e.g. JavaScript).

Answer 4

That is not possible with CSS.
The only possible solution is by wrapping the rest of the sentence in a span, and hide it, like this:
<p>hi<span> google how are you</span></p>
span { display: none; }
Or you should look into a Javascript or PHP solution.

Answer 5

I would personally do this with Javascript
var startText = "hi google how are you";
var endText = startText.substr(0, 3);
// endText is now "hi"

Answer 6

CSS is a method of describing the style of a page's elements. You are trying to edit the content of a page using a framework designed not to have any affect on the content of the page, just the style.
You should probably look at using JavaScript to do what you want. Formatting page elements in this way is not possible in CSS.

Answer 7

CSS is per se not a programming language.
On the other hand, there are good news for you. You can use a programmming language such as JavaScript or jQuery to accomplish this, or even a backend programing language such as PHP or Ruby.
CSS is a language used to apply styles in a cascade manner hence why it is called CSS (Cascading Style Sheets).
Just to give you some advice, what you're trying to accomplish is not called trim. Trim is to remove unnecessary white spaces from a string like the example here shows: JavaScript Trim() Function.
What you're trying to accomplish is called substring which is explained here: JavaScript substring() Function.
var str = "Hello world!";
var res = str.substring(0, 2);
/* Output: He */