Let's say I have a p and I want to remove/hide the first two letters. Is there any way I can do that with only CSS (no JS)?
Example:
.remove-letters {
/* STYLES-HERE */
}
<p class="remove-letters">yrHello There!</p>
Actually, there is a way to do this in pure css! It uses the ch font-dependent unit.
.remove-letters {
font-family: monospace;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display:block;
text-indent: -2ch;
font-size: 2em;
}
<html>
<body>
<p class="remove-letters">yrHello There!</p>
</body>
</html>
Unfortunately this works only with monospace fonts and not in older browsers.
Without Javascript you cant achieve this very well. It would be a very hacky solution. With JS would be working like a charm.
let str = "yrHello There!"
console.log(str.substring(2))
I think I found a way to do it...
Example:
.remove-letters {
font-size: 0px;
}
.remove-letters:after {
font-size: 10px;
content: "Hello There!";
}
<p class="remove-letters">yrHello There!</p>
Related
I'm building a "We the People" website section inspired by the U.S. Constitution, and I'm listing names of "signers" supporting my project. The names have different sizes, and I'm trying to get them to show up nicely on the page. Strangely, the font is consistently offset from the spans containing the names. Here's what I have:
As you can see, the names overlap, which I'd like to avoid. What I find odd is that the text is outside of the span outlines:
The same is true of all the names. Here's my HTML:
<div id="names">
<span class="order ten CalifornyaA-Bold" id="o3">Eric So</span>
<span class="order twenty-five CalifornyaB-Bold" id="o5">Sierra Hansen</span>
<span class="order ten CalifornyaB-Bold" id="o6">Eleanor Collier</span>
...
<span class="order twenty-five CalifornyaC-Bold" id="o69">Maeve McCarty</span>
</div>
... and CSS:
#names {
text-align: center;
padding-bottom: 10%;
}
.hancock, .five-hundred, .two-hundred, .one-hundred, .fifty, .twenty-five, .ten {
line-height: 1.5em;
white-space: nowrap;
}
.hancock {
font-size: 5.5em;
}
.five-hundred {
font-size: 4em;
}
.two-hundred {
font-size: 3.4em;
}
.one-hundred {
font-size: 2.8em;
}
.fifty {
font-size: 2.2em;
}
.twenty-five {
font-size: 1.6em;
}
.ten {
font-size: 1em;
}
Any help would be very much appreciated!
its your line-height since they are inline elements an no block elements, try modifying the value:
.hancock, .five-hundred, .two-hundred, .one-hundred, .fifty, .twenty-five, .ten {
line-height: 110%;//percent would be good
white-space: nowrap;
}
or add individual CSS rules for each one, instead of all being set to1.5em
Edit:
Remember to set a font-size to the parent element since you are using em, check how i wrapped a text and added a font-size in em in the page of the font and its not overlapping:
you can use
span {line-height: 1.2;}
It seems that display: inline-block and then setting margin-top works fairly well. I think that's a bit of a hack solution, but it more or less works.
I am looking for a basic information icon like this:
After some more searching, I myself have found the entity. The code for it is â, and it looks like this: â
There's đ (U+1F6C8, CIRCLED INFORMATION SOURCE). As an HTML entity: đ.
There are plenty of tools, many online, that let you search for, and get more information about, Unicode characters. My personal favourite is this one.
this may help you ,
using html and css we can achieve this results
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<div class="tooltip">đ
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
UNICODE U+02139
HEX CODE âš
HTML CODE âš
CSS CODE \2139
// css example
span {
content: "\2139";
}
HTML Example
<span>âš</span>
Source
These days I use emoji for "info" âšī¸ or "documentation" đ or "source" đ
Previously, I would put the â inside superscript â because it reflects that it is a footnote to the text.
<sup>â</sup>
Also, consider the â° symbol over the đ as it respects the baseline.
Use the unicode: â into the HTML.
HTML Code: âš
CSS Code: \2139
Use tailwind CSS (https://tailwindcss.com/) then the code below will create a nice info button.
<div class="flex items-center justify-center italic
text-stone-500 cursor-default w-5 h-5
rounded-full border border-gray-500 bg-green-100">
i
</div>
I was expecting my buttons in the header to be rounded, but instead they are coming out square. See the home button in the screenshot:
My CSS:
#main {
text-overflow: ellipsis;
overflow: visible;
white-space: normal;
}
a {
text-decoration: none;
}
.ui-header .ui-title {
overflow: visible !important;
}
.ui-header {
min-height: 40px;
}
The snipped of html declaring the header:
<div data-role="page" id="settings">
<div data-role="header" data-position="fixed">
Home
<h1>App</h1>
</div>
...
I was expecting to see buttons round similar to these:
Any pointers appreciated ...
For rounded corners, I'd expect something like:
#home {
border-radius: 5px;
}
Unfortunately, this is also something that varies between implementation of the CSS, so if this doesn't work, please provide more info on versions of tools you use.
The problem was due to this line in my code:
$('a').buttonMarkup({ corners: false });
Removing that fixed the problem :$
I'm working on Blaze, an app that uses the SE API to grab recent content. It works great for finding NAAs, but there's one problem. When someone has put a whole bunch of code or even an entire sentence in an inline code block, this happens:
When it should look like this (non-SO site):
Essentially, the inline code blocks aren't breaking, and thus are pushing the td out to the right. This is the HTML that is generated:
<tr>
<td style="vertical-align:top" class="col-md-1">
<div class="score">
<h2 style="color:rgba(0,0,0,0.6); pull:right">0</h2>
</div>
</td>
<td class="">
<div class="post col-md-9">
<h3>How can I insert PHP into a webpage using Javascript</h3>
<hr>
<span class="post-body" style="color:rgba(70,70,70,1)">
<p><code>Is it possible to insert PHP code into a webpage using javascript after the page has loaded?</code> The simple answer is no. The page has already been rendered, the only way to change it is using javascript running within the user's browser.</p>
...
</span>
<p style="color:grey; float:right">posted by MjrKusanagi <span>a minute ago</span></p>
</div>
</td>
</tr>
This is all the non-Bootstrap CSS I'm using:
<style>
img
{
max-width:100%;
}
html, body
{
height: 100%;
}
#wrap
{
min-height: 100%;
height: auto;
margin: 0 auto -50px;
padding: 0 0 50px;
}
#footer
{
height: 50px;
background-color: clear;
border-top:1px dashed rgba(0,0,0,0.2);
}
.navbar .navbar-nav
{
display: inline-block;
float: none;
}
.navbar .navbar-collapse
{
text-align: center;
}
.flag-button:hover
{
background-color:red;
color: white
}
</style>
Does anyone have any idea how to either (a) Make the td stronger than the inline code blocks, or (b) allow the code blocks to wrap?
Bootstrap sets code whitespace to no-wrap by default. You can override this by simply overriding it with a value that allows for wrapping.
http://jsfiddle.net/nNry2/
CSS
code {
white-space: normal;
}
I used a variation of #thgaskell's answer, taken from here (changing pre to code).
/* Browser specific (not valid) styles to make preformatted text wrap */
code {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Anyone know of a css hack to change the link text in here:
<div id = "foo"> Long Text for Regular site </div>
to this shorter version.
<div id = "foo"> Shorter Text </div>
I was able to add text before or after the link, using pseudoselectors but no luck modifying the link text itself.
I'm using a squarespace template, so I'm not able to use javascript to do this or generate better html.
You can accomplish something similar to what you're trying to do with with CSS3 text-overflow property:
HTML
<p>The quick brown fox jumped over the lazy dogs.</p>
CSS
P {
font-size:12pt;
line-height:12pt;
}
.truncate {
display:inline-block;
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height:11pt;
}
JSFiddle
http://jsfiddle.net/LcS7a/
Try:
#foo a{
text-indent: -9999px;
visibility: hidden;
word-spacing:-999px;
letter-spacing: -999px;
}
#foo a:after{
content: "New Text";
visibility: visible;
word-spacing:normal;
letter-spacing: normal;
}
Demo: http://jsfiddle.net/8DK9g/
** Edit **
Just read you can't alter the HTML that is being generated, leaving this here for anyone that may find it useful
** /Edit **
Using Duver Jaramillo's example, I've moved the shortened text onto the a tag using a data- attribute.
See http://jsfiddle.net/3n1gm4/KrwWL/
HTML
<div id = "foo">
Long Text for Regular site
</div>
And the CSS
#foo a{
text-indent: -9999px;
visibility: hidden;
word-spacing:-999px;
letter-spacing: -999px;
}
#foo a:after{
content: attr(data-short-text);
visibility: visible;
word-spacing:normal;
letter-spacing: normal;
}