How to hide some text in string using CSS

Question

Please find updated code

<html>
<title>css</title>
<head>
<style>
#st {
z-index: -114;
margin-right: -80px;     
}
</style>
</head>
State Code : <span><span id="st"></span>Maharashtra - MH</span>
</html>

I got below output but i need clear overlapped text

enter image description here

Wrap the text you wants to hide in a `span`. Then you can hide it using CSS. — Mohammad Usman, Nov 01 '17 at 06:46

score 1 · Answer 1 · answered Nov 01 '17 at 06:48

1

the only way to approach this is using css display: none or visibility: hidden property , either one would work, i would advice display none. this is the only way CSS and HTML can hide data.

<span>State Code: <span id="st"><span style="display: none">Maharashtra - </span>MH</span></span>

answered Nov 01 '17 at 06:48

Neon Emmanuel

153
1
11

1

Maharashtra - MH comes from db this is a dynamic code – Shreya Nov 01 '17 at 06:51
sorry buy css cant work that, try JavaScript or php it is very much more easier using both. – Neon Emmanuel Nov 01 '17 at 06:53

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

Update 2

Layout has significantly changed...see 2nd updated demo.

Since OP has dynamically generated text, JavaScript is needed realistically. And probably the actual text will be more than one on the page.

This demo gathers all <span> nested within a <span> (could've used #id but realistically, it should be a .class). This NodeList is converted into an array.
This array is then map()'ped on each iteration a regex is matched vs. the <span>s text.
A replace()'ment of the unwanted portion of text is overwritten and the last 2 letters remain.

Demo

var tgt = Array.from(document.querySelectorAll('span'));

tgt.map(function(s, idx) {

  var str = s.textContent;

  var rgx = /(State Code:).*?- (\w\w)/g;

  var rep = `$1 $2`;

  var res = str.replace(rgx, rep);

  s.textContent = res;
});

<span>State Code: <span class="st"></span>California - CA</span><br>
<span>State Code: <span class="st"></span>New York - NY</span><br>
<span>State Code: <span class="st"></span>Oregon - OR</span><br>
<span>State Code: <span class="st"></span>Mississippi - MS</span><br>

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 01 '17 at 06:47

zer00ne

41,936
6
41
68

what does it hide? – Sal-laS Nov 01 '17 at 06:49
The `font-size:0` hides it. Yet it does exist. – zer00ne Nov 01 '17 at 06:52
Maharashtra - MH comes from db this is a dynamic code – Shreya Nov 01 '17 at 06:52
1

@Shreya Then don't expect miracles from CSS. Rewrite your question to ask for JavaScript but emphasize that solution should be light on JavaScript if you are not confident with it. – zer00ne Nov 01 '17 at 06:55
I am using place holder in smarty – Shreya Nov 01 '17 at 06:56

score 0 · Answer 3 · answered Nov 01 '17 at 06:50

You Can't do this by using CSS only here is the javascript solution for u

$("#st").html(function(){
  var text= $(this).text().trim().split(" ");
  var first = text.shift();
  return (text.length > 0 ? "<span class='hide'>"+ first + "</span> " : first) + text.join(" ");
});

.hide {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>State Code: <span id="st">Maharashtra - MH</span></span>

score 0 · Answer 4 · answered Nov 01 '17 at 06:51

see this is HTML version but it is working fine.

<span id="span_Id">Maharashtra - MH</span>

<script>
function getSecondPart(str) {
    return str.split('-')[1];
}
var span_Text = document.getElementById("span_Id").innerText;
var html = getSecondPart(span_Text);
document.getElementById("span_Id").innerHTML = html;

</script>

score -1 · Answer 5 · answered Nov 01 '17 at 06:45

-1

If you use PHP... try it below..

$string = explode("-","Maharashtra - MH");

<span>State Code: <span id="st"><span style="display:none;"><?php echo $sting[0]."-"; ?></span><?php echo $string[1]; ?></span></span>

answered Nov 01 '17 at 06:45

Nandhi Kumar

343
1
11

How to hide some text in string using CSS

5 Answers5

Update 2

Demo