How can I display the bottom half of a line of text in a text area or label? In my CSS, I have this
.label {
font-size: 13px;
height: 7px;
width: 200px;
display: inline-block;
overflow:hidden;
}
<label class="label">TEST CODE</label>
What this does is display the top half of the label as if the line was cutoff. For example, the letter O would be displayed as a semicircle arc similar to an n. I have a need for this type of display and it works for me.
What I need to do is display just the bottom part of the line so a semicircle arc on the letter O would look something like a u. I can't use a mask because I'm displaying an image beneath the label so it has to have a transparent background. I tried padding-bottom but that didn't help. Any suggestions would be appreciated.
From my understanding, you are trying to crop the top half of the text horizontally rather than cutting off the bottom half.
To do this, you need to include an overflow: hidden value if you wish to 'crop' elements. In addition, you will want to set the line-height value for text elements to 0px. The bottom padding will then push the content above the original top position.
.crop-top {
overflow: hidden;
font-size: 13px;
line-height: 0px;
height: 7px;
width: 200px;
padding-bottom: 7px;
display: inline-block;
}
<label class="crop-top">THIS TEXT IS CROPPED</label>
You can wrap the inner content in <span> and then using the transform css property you can achieve this
Stack Snippet
body {
background: black;
color: white;
margin: 0;
}
div {
margin-bottom: 30px;
}
.upper,
.bottom {
font-size: 50px;
line-height: 50px;
height: 25px;
display: block;
overflow: hidden;
vertical-align: top;
color: red;
}
.bottom {
transform: rotateX(180deg);
margin-top: 10px;
color: yellow;
}
label span {
line-height: 50px;
display: block;
}
.bottom span {
transform: rotateX(180deg);
}
<div>
<label class="upper"><span>HELLO</span></label>
<label class="bottom"><span>HELLO</span></label>
</div>
<div>
<label class="upper"><span>WELCOME</span></label>
<label class="bottom"><span>WELCOME</span></label>
</div>
Related
I am working on a react app where I have a table and one of my column has really large text value ,so in order to show that value I am using a hover popup to show the full text on hovering over the column value but when I hover over it,it overlaps the other columns as it show the whole text in 1 straight line.
Here's the table row and truncate function:
truncate = (str, n) => (str.length > n ? `${str.substr(0, n - 1)}...` : str);
<Table.Cell data-title={message.job_data}>
{this.truncate(message.job_data,50)}
</Table.Cell>
Here's the css of data-title:
[data-title] {
font-size: 14px;
position: relative;
cursor: help;
}
[data-title]:hover::before {
content: attr(data-title);
opacity: 1;
position: absolute;
margin-top:33px;
padding: 10px;
background: #000;
color: #fff;
font-size: 14px;
width:300px;
white-space: wrap;
z-index: 9;
}
[data-title]:hover::after {
content: '';
position: absolute;
opacity: 1;
bottom: -12px;
left: 8px;
border: 8px solid transparent;
border-bottom: 8px solid #000;
}
I want to show the column text in multiple lines and not a straight line overlapping all the other columns.
Attaching a screenshot of my error:
As you can see in the message column,the text is very long and it is showing it horizontally overlapping all the columns.
Thanks
As the text you try to break doesn't have any white-space in it, only way I can think of doing this in CSS is by word-break: break-word;
[data-title]:hover::before {
content: attr(data-title);
opacity: 1;
position: absolute;
margin-top:33px;
padding: 10px;
background: #000;
color: #fff;
font-size: 14px;
width:300px;
word-break: break-word;
z-index:9;
}
I didn't find the right answer to my question.
using Angular, I'm displaying file names in a scrollable div. I need to hover over a file name and see some info in a pop up.
The problem is that pop up shows based on where file name was positioned before user started scrolling. I.e. if I scroll all the way down and hover over a filename, pop up will be displayed somewhere on the bottom of the page.
Another detail is that right after a scrollable div I have a non-scrollable div. I think because of that I can't use position absolute because pop up won't be rendered on top of the second component.
<div style="display:table;" class="upload-item" *ngFor="let f of files; let i = index;">
<span class="filenameblock">
<span class="file-name">{{ f.name}</span>
<span class="tooltiptext">{{f.info}}</span>
</span>
<span style="width:30%;" class="progress">
<span class="bar" [style.width]="f?.progress?.data?.percentage + '%'"></span>
</span>
</div>
<div>Non scrollable div here</div>
css:
.upload-items .upload-item {
width: 100%;
display: block;
margin-bottom: 5px;
height: 5vh;
line-height: 4.9vh;
border: 2px solid #CBCBCB;
border-radius: 3px;
position: relative;
}
.filenameblock {
display: inline-block;
position: relative;
padding: 0 0 5px 5px;
color: #74809D;
margin-left: 5px;
max-width: 300px;
}
.tooltiptext {
visibility: hidden;
width: auto;
padding: 0 15px 0 15px;
background-color: #E7F5FC;
color: #6A6A6A;
text-align: center;
border-radius: 6px;
left: 10vw;
margin-top: 3vw;
position: fixed;
/*z-index: 1000;*/
}
.file-name:hover + .tooltiptext {
visibility: visible;
}
I tried to add 'top' to pop up styling but in this case pop up displayed on the same height all the time.
How to bring square shape using div and and align text right using css?
I want to display like chart legend
squareshapeimage(Using div) Legend Text
I have tried below way but font is coming in below
<div> <div vertical-align: middle; margin-bottom: 0.75em; style="width:5%; height:5%; margin-top:4%; margin-left:3%; padding-bottom:5%;background-color:red"> </div> <span>Present</span> </div>
are you looking for something like this ?
.a {
position: relative;
width: 200px;
height: 200px;
border: 1px solid rgb(0, 0, 0);
}
.a span {
position: absolute;
right: 10px;
top: -10px;
display: block;
background-color: #FFF;
padding: 0 5px;
}
<div class="a">
<span>Present:</span>
</div>
I am still learning CSS. I am creating a game with time and score.
To be short I want to create this:
And this is what I have:
jsFiddle link: http://jsfiddle.net/yZKTE/
CSS:
#boxbuttons {
/*text-align: center;*/
/* margin: 20px;*/
display: block;
top:0;
left: 0;
right: 0;
padding:50px;
/*width:900px;*/
}
#boxbuttons .button {
text-transform: uppercase;
padding: 5px 10px;
margin: 5px;
border-radius: 10px;
cursor: pointer;
}
#rezz
{
background:url(../images/score.png) left top;
width:35px;
height:35px;
background-repeat:no-repeat;
}
#counter{
margin-left:50px;
}
#time
{
background:url(../images/time.png) right top;
width:35px;
height:35px;
background-repeat:no-repeat;
}
#ttime{
margin-right:50px;
}
HTML:
<span id="boxbuttons">
<span class="button" id="rezz">
<span id="counter">0</span>
</span>
<span class="button" id="time"><span class="button" id="ttime"></span></span>
</span>
There is a lot of this that are causing this problem.
The first thing you're going to want to do is "shrink wrap" your outer div. This will make it so that when you float an element, it will float to the right of the parent div, not the outermost div. This is hard to explain, but put the following CSS in, and notice the width of the #picbox div shrink to be as wide as it's contents.
#picbox {
display: inline-block;
}
Your #boxcard CSS has margin: 0 auto; which is centering it. You want to remove this, which will start the #boxcard div all the way to the left. Add some margin-left to the div to get it to line up with the header. Like this:
#boxcard {
-webkit-perspective:1000;
-moz-perspective:1000;
-ms-perspective:1000;
-o-perspective:1000;
perspective:1000;
display: table;
margin-left: 50px;
width: auto;
z-index: 1;
}
Lastly, lets get your #time div to float to the right. First, change #time to #boxbuttons #time so that it overrides your #boxbuttons .button styles. First, we're going to float it right with float: right;. Then, we're going to remove the width you've set, so that it takes up auto width. Lastly, we'll give it some padding-left and change the background to left top, so that the time and the clock image are separated from each other, and the clock is now on the left.
#boxbuttons #time {
background:url("http://remake.hr/memtest/images/time.png") left top;
height:35px;
background-repeat:no-repeat;
float: right;
padding-left: 30px;
}
I think that's everything.
http://jsfiddle.net/yZKTE/6/
Change the #time css like so:
#time
{
background:url("http://remake.hr/memtest/images/time.png") right top;
width:100px;
height:35px;
background-repeat:no-repeat;
display: inline-block;
float:right;
}
The span HTML element is by default display:inline, meaning that width and height attributes do not affect it. By setting it to display:inline-block, this allows the width attribute to take charge. I changed the width to 100px because otherwise it was too small. I also added the float:right attribute because that tells the element to float to the rightmost position inside its parent element.
http://jsfiddle.net/yZKTE/1/
EDIT:
Do this to move the time to the right side of the clock icon:
#time {
background: url("http://remake.hr/memtest/images/time.png") left top;
width: 145px;
height: 35px;
background-repeat: no-repeat;
display: inline-block;
float: right;
line-height: 35px;
padding:0!important;
}
#ttime {
float: right;
font-size: 35px;
line-height: 35px;
margin: 0!important;
padding: 0!important;
}
http://jsfiddle.net/yZKTE/4/
I am making something and am wondering how to get a div to overlay another div and it's contents. What I am trying to do it kinda like youtube, when you are on a video and you hover over someone's avatar it will show a small box with their channel art and things. Here is a photo of what i'm currently getting screenshot. Here are my codes for the two divs:
circular div
#staff-info {
width: 400px;
height: 300px;
background: #999;
border: 1px solid #333;
border-radius: 6px;
margin: 0 auto;
position: relative;
}
staff boxes
#staff {
width: 256px;
height: 60px;
margin: 7px 4px 7px 4px;
background: #fff;
display: inline-block;
background: #f3f6f9;
}
.staff-avatar {
width: 40px;
height: 40px;
padding: 10px;
display: inline-block;
float: left;
}
.staff-name {
display: inline-block;
padding-top: 8px;
}
.staff-job {
padding-top: -100px;
font-size: 12px;
}
Grey area (main div)
#youtuber-about {
width: 890px;
height: auto;
background: #d5d3d3;
margin-left: auto;
margin-right: auto;
font-size: 16px;
padding: 10px 0px 10px 10px;
display: inline-block;
}
html for the divs
<div id="staff-info">yolo</div>
<div id="youtuber-about" style="color: #333;">Our Staff<br>
<?php
foreach ($staff as $staff) {
echo '
<div id="staff"><img src="'.$staff['avatar'].'" class="staff-avatar"><div class="staff-name">'.$staff['name'].'</div><div class="staff-job">'.$staff['job'].'</div></div>';
}
?>
</div>
If you are using jQuery, you can just append the info div inside of each staff member div whenever the users moves their mouse over that staff member.
$('#youtuber-about > div').mouseover(function(){
$(this).append($('#info'));
});
And then you can style that with CSS quite easily, just setting the info div to be position: absolute; and set to fill the containing element, set to show on hover.
See Demo
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
What I would do is have a div that holds both of these two divs and play with your CSS and the nesting of the divs to overlay them properly.
Absolute and Relative positioning is pretty tricky as first but once you get a hang of it you'll be doing it left and right
So remember
Add both divs to a third empty div and then put the one you want overlaying below the other.
To move use
.something {
position: absolute
top:20%
right:15%
left:10%
bottom:20%
}