I would like to render text vertically one by one using CSS. If using rotation method, we can get like below,
But I am expected to render the text like below,
Could anybody tell me your suggestion on this?
Note: I am setting this text using 'content:attr(data-content)' in CSS and data-content is "HELLO".
You can break each character of content:attr(data-content) like following way:
.test::after {
content: attr(data-content);
font-size: 25px;
}
.test {
width: 0;
word-break: break-all;
}
<div class="test" data-content="Hello"></div>
How about this:
h1 span { display: block; }
<h1>
<span> H </span>
<span> E </span>
<span> L </span>
<span> L </span>
<span> O </span>
</h1>
or you can try like this using word-wrap: break-word;:
h1 {
width: 50px;
font-size: 50px;
word-wrap: break-word;
}
<h1> HELLO </h1>
Try using this with simple HTML instead of with CSS
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Vertical Text</title>
<style>
h1 span { display: block; }
</style>
</head>
<body>
<h1>
<span> N </span>
<span> E </span>
<span> T </span>
<span> T </span>
<span> U </span>
<span> T </span>
<span> S </span>
</h1>
</body>
</html>
Related
I have the following HTML:
<div>
<p>
Some text
<span class="fa fa-ban"></span>
</p>
</div>
where the "Some text" part can be anything. What I want to achieve is the following in CSS:
.
I tried using absolute positioned elements, floats, and couple of other hacks but none of them worked. Can somebody help me with how I can achieve the same? I don't even know if this is achievable with CSS but I could be wrong.
Flexbox can easily do this:
.box {
display: flex;
max-width: 200px;
border:1px solid;
}
.box span:first-child {
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
}
.box span:last-child {
flex-shrink: 0;
margin-left:5px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<p class="box">
<span>Some text</span>
<span class="fa fa-ban"></span>
</p>
<p class="box">
<span>more and more text</span>
<span class="fa fa-ban"></span>
</p>
<p class="box">
<span>a lot of text here to have an overflow</span>
<span class="fa fa-ban"></span>
</p>
I want to put some text on the left of my page, some on the center and some of the right. Like this:
Left Center Right
And I tried with that code:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Title</TITLE>
</HEAD>
<BODY>
<div>
<p style = "float:left"> Left </p>
<p style = "float:center; text-align: center;" > Center </p>
<p style = "float:right"> Right </p>
</div>
</BODY>
</HTML>
and it positions the different words correctly but in different lines. I want that the three words will be on the same line.
I also tried changing all paragraphs <p> to <span> and the three words are displayed in the same line but only the words Left and Right are positioned correctly. The word Center it is not displayed on the center, just following the word Left.
I saw that in some cases people do this with a table.
Is it possible to avoid it and get the same behaviour?
Thanks in advance!
JSFIDDLE example
<div>
<p>Left</p>
<p>Center</p>
<p>Right</p>
</div>
div {
display: flex;
justify-content: space-between;
}
P.S. Keep in mind the flexbox support
This will work: JS Fiddle
HTML
<div>
<p class="left-text col">Left Text</p>
<p class="center-text col">Center Text</p>
<p class="right-text col">Right Text</p>
</div>
CSS
.col {
float: left;
width: 33.33333333%;
}
.left-text {
text-align: left;
}
.center-text {
text-align: center;
}
.right-text {
text-align: right;
}
That should help
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<style>
.pos{
width:33%;
display: inline-block;
}
</style>
</HEAD>
<BODY>
<div>
<span class=pos align=left> Left </span>
<span class=pos align=center> Center </span>
<span class=pos align=right> Right </span>
</div>
</BODY>
</HTML>
I have got the look I desire with my css. A centered <p> and <div> one on top of the other and they are both wrapped in <a> tags.
Now my issue is that the <a> tags go for the entire width of the page, I just want to be able to click on the link where the actual content is.
example link:
https://jsfiddle.net/vinko_k_design/dge4fx2z/
Put the anchor tags inside the p tag.
<p class="page-nav">Check out our Map</p>
Using a span (inline element) instead of a div/p (block element), and moving the text-align property to the upper level will fix your issue. As follows:
.page-nav-buttons {
text-align: center;
}
.page-nav {
}
.page-nav-img {
width: 20px;
height: 20px;
background-color: red;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
<div class="page-nav-buttons">
<a href="#map">
<span class="page-nav">Check out our Map</span>
</a>
<br/>
<a href="#map">
<span class="page-nav-img"></span>
</a>
</div>
Try this
https://jsfiddle.net/dge4fx2z/1/
<div class="page-nav-buttons">
<p class="page-nav"> <a href="#map">
Check out our Map
</a>
</p> <span class="page-nav-img">
<a href="#map">
<span class="page-nav-img"></span>
</a>
</span>
</div>
Below is the code in which I tried using text-decoration:none. However, text is always underlined.
<html>
<head>
<style type="text/css">
.search, .search_b1, .search_b2{
display: block;
color: #000;
text-decoration: none;
}
.search_b1:hover {
color: red;
}
</style>
</head>
<body>
<div id="left">
<a href = "#">
<span class="search">
<span class="search_b1">Text text</span>
<span class="search_b2">Text text</span>
</span>
</a>
</div>
</body>
</html>
You set the span element to a block element.
Block elements can not have text-decoration. Only inline elements can.
You need to apply the text-decoration to the anchor elements.
I am trying to create one table using the <span> and <div> concept.
But the table is not coming together properly. I couldn't find where the issue is. Please tell me what the problem is. I have to produce 4 to 5 lines in a same row.
Sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.line1
{
background-color:#AAAAAA;
height: 150px;
width: 1px;
display: block;
}
.line2
{
background-color:#CE5611;
height: 150px;
width: 1px;
display: block;
margin-left: 121px;
}
</style>
</HEAD>
<body>
<div id="a1" style='padding-left: 14px;width: 100px;'>
<span>h1</span>
<span class="line1"></span>
<span>h2</span>
<span class="line2"></span>
<span>h3</span>
<span class="line1"></span>
</div>
</body>
</html>
Instead this way of going :
<div id="a1" style='padding-left: 14px;width: 100px;'>
<span>h1</span>
<span class="line1"></span>
<span>h2</span>
<span class="line2"></span>
<span>h3</span>
<span class="line1"></span>
</div>
do
#wrapper .content{
float:left
width:100px;
padding:.5em;
}
#wrapper .content span{
font-weight:bold;
}
<div id="wrapper">
<div class="content"><span>line 1</span></div>
<div class="content"><span>line 2</span></div>
<div class="content"><span>line 3</span></div>
</div>
you got the idea ..
Do you really want the classed spans to have display: block? That forces each one onto a seperate line. Functionally, <span style="display: block"> is kinda the same thing as <div> (and <div style="display: inline"> is kinda the same thing as <span>).
You're probably looking for display: inline-block. That gives you the ability to block attributes (height, width) like you are, but still leave it moving around within the surrounding contents. Another alternative is to use display: table-cell. There's a chart of display support here.
You should use a <table>.
I prefer using li and span tags instead of div and span. It makes manipulation much easier. With li as block and span inline-block.