CODEWITHSUNDEEP
css
Biju s
Biju s

Reputation: 430

Trim a string Using css

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 .

Upvotes: 7

Views: 31908

Answers (7)

Steven Wallace
Steven Wallace

Reputation: 9

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; }

Upvotes: 0

Kheema Pandey
Kheema Pandey

Reputation: 10265

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*/
}

Upvotes: 17

WongKongPhooey
WongKongPhooey

Reputation: 394

I would personally do this with Javascript

var startText = "hi google how are you";
var endText = startText.substr(0, 3); 
// endText is now "hi"

Upvotes: -1

CodeTrooper
CodeTrooper

Reputation: 1888

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  */

Upvotes: -1

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18113

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.

Upvotes: 0

Enethion
Enethion

Reputation: 1257

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).

Upvotes: 0

Alastair Campbell
Alastair Campbell

Reputation: 668

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.

Upvotes: -1

Related Questions