I have a text that contains some HTML, and then I use the v-html to display the text. Since the text is rather long, I need a Read more that the user can click on. The Read more must be on the same line as the text.
The code becomes like this:
<div v-html="some-variable-containing-html"></div>
<a #click="makeMoreTextVisible()">Read more</a>
Since I want the Read more to start exactly where the HTML text ends, I would normally use display:inline, but here it does not work.
Has anyone come across this problem?
The div is display:block by default, which starts the element on its own line, pushing Read more to the next line.
You could change the div to a span, which is display:inline by default. This assumes that the HTML variable doesn't contain an element that pushes elements to the next line like the original div.
demo 1
If your HTML variable contains display:block elements (such as div or p), you could apply a class to the HTML container that forces its last child element (with :nth-last-child) to display:inline:
<template>
<div>
<div class="container" v-html="myHtml"></div>
<a #click="makeMoreTextVisible()">Read more</a>
</div>
</template>
<style>
.container {
display: inline;
}
.container :nth-last-child(1) {
display: inline;
}
</style>
demo 2
Related
I wrote simple CSS to align text using the w3schools example with:
text-align:center
When I add an underline in the same format, the underline works.
Here's the snippet:
.CenterIt {
text-align:center;
}
.UnderlineIt {
text-decoration:underline;
}
<span class="UnderlineIt">
<span class="CenterIt">Registration Form</span>
</span>
Here's the w3schools page (the align text section):
https://www.w3schools.com/css/css_align.asp
In my full code I have the text I want to center inside another box. I've tried it both inside that box and outside any boxes. It doesn't center.
.CenterIt {
text-align:center;
display:block;
}
.UnderlineIt {
text-decoration:underline;
}
<span class="UnderlineIt">
<span class="CenterIt">Registration Form</span>
</span>
The display property of span by default is inline. i.e.,
display:inline;
Therefore, <span> will take only the width of its content. In contrast, block elements like <div>, by default, take the full line (and thereby the full width of the page) for its content.
To make the text-align work for <span>, you need to change it into a block element.
Set
display: block;
for the span with .CenterIt class. This will make .CenterIt take the full line (and thereby the full width of the page), and then the text-align: center; will centralize the content.
Try this. You need to wrap it with a container unit of <div>
<div class="UnderlineIt">
<div class="CenterIt">Registration Form</div>
</div>
Following will work as well
<span class="UnderlineIt">
<div class="CenterIt">Registration Form</div>
</span>
It might work better if you run “display: flex;” on the container span and “justify-content: center;” on the child span. Flexbox is a little easier to use when placing items within a container.
Because your html, is in wrong format. You cant have a span child of a span.
try like this:
<div class="CenterIt">
<span class="UnderlineIt">Registration Form</span>
</div>
to have the span centered , without a parent div you would need to put the display, as block.
so you could have on your html and css like this:
span{display:block;}
.CenterIt {
text-align:center;
}
.UnderlineIt {
text-decoration:underline;
}
html:
<span class="UnderlineIt CenterIt">Registration Form</span>
I'm currently wondering about the following problem: I have for example a simple header H1 with a SPAN tag inside which I want to style differently by CSS depending on the position of the SPAN element, meaning I need to detect if the span element is in line with the text node content of the H1 tag or is pushed to a new line because it doesn't fit in the line.
<h1>
This is a header
<span class="special">Special content</span>
</h1>
Is there anybody out there having a good idea or even a solution to this?
Javascript
Just use javascript to add/remove class if element is or is not wrapped.
JSFiddle
CSS
But if you really want to use just css then you can try with this problematic solution:
Use ::first-line pseudo element to style header and then style span as rest of h1. The problem is that it could style also your header if it would wrap at some point.
h1::first-line {
color: black;
}
h1 {
color: red;
}
<h1>
This is a header
<span class="special">Special content</span>
</h1>
Sadly, CSS does not have any complex mechanism for managing lines.
I was trying to parse from a complicated html page, but someone told me a better way is to inject my own css into that html. So I have the following situation:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div>
layer one div
<div id="center">
layer two div
<div>
layer three div
</div>
</div>
</div>
</body>
</html>
As you can see the div with id is sandwiched between a parent div and a child div.
I wonder if it is possible to hide the parent and child, making the page only show layer two div line. I try doing
div { display: none; }
div#center { display: inline;}
but without success.
I am using the indent method now, thank you for all the help, guys! : )
Here is kind of a hack, but it works:
HTML
<div>
layer one div
<div id="center">
layer two div
<div>
layer three div
</div>
</div>
</div>
CSS
div {
text-indent: -9999px;
}
div#center {
text-indent: 0px;
}
div#center div {
display: none;
}
Fiddle: http://jsfiddle.net/fPdda/2/
As far as I know, there is no option to show element which is placed under hidden element. So CSS will not do the trick. The only possible option is use javascript, which move element which is supposed to be visible out of parent. This can be easily done with jQuery.
However I don't know why you need this and what you mean with word "parse". CSS will affect only what you see, but under "parse" I understand processing data - and for processing is not important how it is shown. Maybe if you specify more detailed what you need, I can help.
This method will not work. Sadly, because your displayed div is inside a hidden div, you're sunk if you're stuck with that markup. You could get fancy and use text-indent: -9999px instead of display: hidden, then text-indent: 0px on the one you want to show, but the negative indented elements will still take up vertical space. Alternately, you could use JS to duplicate the node and re-insert it into the DOM at a different point, maybe inside an element that isn't hidden.
var nodeToShow = document.getElementById('center').cloneNode();
nodeToShow.setAttribute('id', 'centerClone');
document.body.appendChild(nodeToShow);
I don't think that is possible. Hiding the parent div takes precedence on the child, so your child with id is visible but only in the scope of parent div which is hidden. In order to accomplish what you trying to do just wrap the parent text in a span and hide the span;
div span{
display:hidden;
}
div#center div{
display:hidden;
}
You can't hide a parent yet make a child element visible, it just doesn't work that way. I would suggest doing something like this:
<div class="layer-one">
<span class="layer-one">layer one div</span>
<div id="center">
layer two div
<div>
layer three div
</div>
</div>
</div>
.
div,
span.layer-one {
display: none;
}
div.layer-one,
div#center {
display: block;
}
In my site there're two different div, but they have the same parent div (two child div). So, I want to do this: div.1:hover -> div.2{display:none}. How can I do it using CSS?
Depending on the way your HTML is laid out it can work. The divs need to be next to each other like so:
<div class="first">
First div
</div>
<div class="second">
Second div
</div>
Then use this CSS:
div.first:hover + div.second { display: none; }
Fiddle here: http://jsfiddle.net/CyT2N/
You can easily accomplish that with JQuery.
$(document).ready(function(){$("#first").hover(function(){$("#second").hide();}, function(){$("#second").show();});});
Explanation:
this code adds a "hover" handler for the first element on document.ready, when the mouse enters we hide the second element, and when the mouse leaves, we show it again.
This way, it will work no matter where the elements are within the layout.
See here: http://jsfiddle.net/avrahamcool/RenK2/
Edit
If you want the second div to hide when the first one is clicked, use $("#first").click(function(){$("#second").hide();}) instead of hover(..)
See here: http://jsfiddle.net/avrahamcool/RenK2/1/
Here is a simple way of doing it:
If you have HTML similar to this:
<div class="wrap">
<div class="first">First div</div>
<p>some other element...</p>
<div class="second">Second div</div>
</div>
your CSS would be:
.first:hover ~ .second {
display: none;
}
Demo at: http://jsfiddle.net/audetwebdesign/HQN6n/
The one limitation that .first and .second must be sibling elements within the same parent element, .wrap in this example.
The general sibling combinator ~ is supported for IE7+
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors
Let´s say I have following mark up and CSS:
HTML:
<div id="Container">
<div id="Content">
[* some text *]
</div>
</div>
CSS:
#Container {
height: 400px;
overflow: scroll;
}
#Content {
height: 800px;
}
Obviously this set up invokes a scrollbar to possibly scroll down 400px. I created a jsFiddle for a better understanding.
Is there a way to jump to the second paragraph by CSS only?
I added a javascript command to demonstrate what I want to achieve. Just uncomment and run it.
There are two things that I have tried so far, but in both cases I was not able to scroll up anymore:
Setting the margin-top attribute of the inner div container to -180px
Setting the inner div container to position: absolute and top: -180px
Note: I do not care for the paragraph or any content. This is just an example. I want to jump to an arbitrary position.
Edit:
Anchor tags are not an option. I do not want to flood my mark up with unnecessary tags.
How about the humble 'a' tag?
jump to one
jump to two
<a name="one">this is one</a>
<a name="two">this is two</a>
Not with CSS, but with standard HTML/anchors.
http://jsfiddle.net/r6vn7/3/
paragraph 2
Give your paragraph an ID and use the URL hash to say where to go to. I used an anchor as an example how to make it jump to the second paragraph.