I have this Japanese text segmented into <span>s. In the images below I added red borders to the spans to illustrate the problem. The vertical text is achieved using the writing-mode: vertical-rl; CSS property on the surrounding div.
Browser: Chromium
Browser: Firefox
Browser: Android
As you can see the text inside centred inside each span either having a gap left or at the top. Or in the case of Android it doesn't even seem to put each character inside of a square. Is there a way to ensure each character is perfectly centred inside of the <span>s?
Example HTML file:
<!DOCTYPE html>
<html lang="ja">
<style>
span {
border: 1px solid red;
text-align: center;
}
</style>
<body>
<div>
<span>一</span><span>＋</span><span>三</span><span>＊</span><span>九十</span>
</div>
<br>
<div style="writing-mode: vertical-rl">
<span>一</span><span>＋</span><span>三</span><span>＊</span><span>九十</span>
</div>
</body>
</html>
Result seems to depend on the browser!
It would be more helpful if I could see the CSS code, but try using the text-align CSS property if you haven't yet.
You can use it like this: text-align: center;
span {
border: 1px solid red;
text-align: center;
font-size: 30px;
}
<!DOCTYPE html>
<html lang="ja">
<body>
<div>
<span>一</span><span>＋</span><span>三</span><span>＊</span><span>九十</span>
</div>
<br>
<div style="writing-mode: vertical-rl">
<span>一</span><span>＋</span><span>三</span><span>＊</span><span>九十</span>
</div>
</body>
</html>
You should look at this post. Try padding-right or text-align: center on the CSS. I could probably tell you what is is if I saw the code.
Related
I have a web application that is responsive. I simply cannot see the full label for an HTML select on an iPhone. It will say something like "really long str.." Is there a fix out there for this? Androids wrap the selections.
I have no idea how to fix this, as you have not provided me with a snippet of code. Copy the html from your page and edit the question. Otherwise, you can try using css #media rules. Try doing this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>example code</title>
<style rel="stylesheet">
p {
padding: 1%;
text-align: center;
border: solid 5px black;
border-radius: 25px;
color: white;
background-color: grey;
display: inline;
margin: 10px;
}
}
</style>
</head>
<body>
<div>
<p> Really long line of text that didn't fit in box </p>
</div>
</body>
</html>
This sample html code will automatically wrap around the tag and it should work with iPhone. Feel free to edit code to make it responsive.
<!DOCTYPE html>
<html>
<head>
<style>
div.div1 {
align-items: center;
border-style: solid;
border: 1px solid red;
display: flex;
}
</style>
</head>
<body>
<div class="div1">
<img src="smiley.gif">
One<br>Two<br>Three<br><font color="red">Four</font>
</div>
</body>
</html>
I use the above code to display an image and the text One, Two, Three, Four next to it. I am trying to make Four have a red color but it places it seperately from the other numbers, to the left. How can I fix this?
First of all I would advise against using a font element with inline CSS as the font element is now obsolete, instead use a span with the class red which you can then style using CSS.
Secondly wrapping all of the text in a div will keep them aligned.
Example:
div.div1 {
align-items: center;
border-style: solid;
border: 1px solid red;
display: flex;
}
.red {
color: red;
}
<div class="div1">
<img src="https://www.w3schools.com/tags/smiley.gif">
<div>
One
<br>
Two
<br>
Three
<br>
<span class="red">Four</span>
</div>
</div>
Hope this helps!
Just wrap the whole statement in another tag like so :
<p>One<br>Two<br>Three<br><span style="color:red">Four</span></p>
BTW - I dicourage style attributes in favor of a proper css file but just for demonstration's sake ...
This happens because when you use flex in the styling Each in-flow child of the container becomes a flex item, and each contiguous run of text that is directly contained inside a flex container is wrapped in an anonymous flex item.
Same source, no difference, but Vertical Align only works on jsfiddle. Please help me to answer.
This is HTML Source, it doesn't work on Chrome:
<html>
<head>
<title>Demo</title>
<style>
.checkboxOfField
{
display: inline-block;
width: 100%;
background-color: red;
height: 40px;
line-height: 40px;
}
</style>
</head>
<body>
<span class="checkboxOfField">
<input style="text-align: center; vertical-align: middle" type="checkbox" />
</span>
</body>
</html>
And this is jsfiddle link: http://jsfiddle.net/UghzT/
It works on Chrome. Thanks.
Probably because of Quirksmode?
Add a Doctype!
Why adding the style to the input? It isn't doing anything.
The input has a type="checkbox" attribute. Thus text-align:center; is a bit strange because there will never be text inside. Even the vertical-align property does not belong there. There isn't anything inside the checkbox to align...
The CSS code you have will do in order to align everything in the span in the middle.
Check this jsFiddle. I deleted the ´style` attribute and it still works great.
I am attempting to control the thickness of an underline, however, it seems its just one huge horizontal line that does not conform to the text. How can I get the text to underline as the same thickness of the text:
<!DOCTYPE>
<html>
<head>
<style type="text/css">
.title {
border-bottom: 2px solid red;
}
</style>
</head>
<body>
<div class="title">test</div>
</body>
</html>
The 'border-bottom' style is being added to the 'div' tag. Because by defult 'divs' are set to 'display: block;' the width of the div is 100%. To solve this, add another tag surrounding the text and give the class to that tag.
For Example: <div><span class="title">test</span></div>
New Code:
<!DOCTYPE>
<html>
<head>
<style type="text/css">
.title {
border-bottom: 2px solid red;
}
</style>
</head>
<body>
<div><span class="title">test</span></div>
</body>
</html>
you just have to insert display:inline-block; in your css or float the element;
The problem you have is that you're using a border, not an underline. The border extends the full length of the element, which for a div is width: 100% by default.
To change that you should limit the width of the div explicitly, or by using float or changing its display.
Using width:
div {
width: 10em; /* or whatever... */
}
JS Fiddle demo.
Using float:
div {
float: left; /* or 'right' */
}
JS Fiddle demo.
Using display:
div {
display: inline-block; /* or 'inline' */
}
JS Fiddle demo.
Of course, given that you effectively want the underline to be below the text and, presumably, serve to 'underline' the text (see the problem with the demo, using a defined width if the text is longer than the defined width), it'd be easier to simply use an in-line element, such as a span for this, rather than a div, since its default behaviour is the same behaviour that you want.
Change your div to a span.
span is good for short pieces of text on a single line.
See here:
Example
If you use em instead of px, the border adopts the font size.
span {
font-size:5em;
border: solid black;
border-width:0 0 0.1em;
}
Here is a fiddle: Fiddle.
Seems like for IE7 there is only method to make this work:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {
border-bottom: 3px solid red;
display: inline;
}
</style>
</head>
<body>
<div><h1>Hello, world</h1></div>
</body>
</html>
try adding: margin: auto.
This should scale the line according the length of the text
I'd like to have a line that starts right after my text on the same line, I've tried with the following simple code
<html><body>My Text<hr/></body></html>
It seems that <hr> is not an option because it is always on a new line and I'd like the line to start at the right of my text.
Any help ?
The <hr> has default styling that puts it on a new line. However that default styling can be over-ridden, in the same way as it can for any other element. <hr> is in essence nothing more than an empty <div> with a default border setting.
To demonstrate this, try the following:
<div>Blah blah<hr style='display:inline-block; width:100px;' />dfgdfg</div>
There are a number of ways to override the styling of <hr> to acheive your aim.
You could try using display:inline-block; along with a width setting, as I have above. The down-side of this approach is that it requires you to know the width you want, though there are ways around this - width:100%;, and the whole line in a container <div> that has overflow:hidden; might do the trick, for example:
<div style='overflow:hidden; white-space:nowrap;'>Blah blah<hr style='display:inline-block; width:100%;' /></div>
Another option would be to use float:left;. You'd need to apply this to all the elements in the line, and I dislike this option as I find that float tends to cause more problems than it solves. But try it and see if it works for you.
There are various other combinations of styles you can try - give it a go and see what works.
Using FlexBox Property this can be achieved easily.
.mytextdiv{
display:flex;
flex-direction:row;
align-items: center;
}
.mytexttitle{
flex-grow:0;
}
.divider{
flex-grow:1;
height: 1px;
background-color: #9f9f9f;
}
<div class="mytextdiv">
<div class="mytexttitle">
My Text
</div>
<div class="divider"></div>
</div>
Try this:
<html><body>My Text<hr style="float: right; width: 80%"/></body></html>
The inline CSS float: right will keep it on the same line as the text.
You'll need to adjust the width if you want it to fill the rest of the line.
Using inline or float, as far as I tested it doesn't work properly even if this was my first thought. Looking further I used the following css
hr {
bottom: 17px;
position: relative;
z-index: 1;
}
div {
background:white;
position: relative;
width: 100px;
z-index: 10;
}
html
<div>My Text</div><hr/>
Demo http://jsfiddle.net/mFEWk/
What I did, is to add position relative in both elements (to give me the advantage of z-index use). Also from the moment I had position:relative for hr I moved it from the bottom:17px. This move it above the div that contains the text. Applying z-index values and adding background:white for the div puts the text above the the line. Of course don't forget to use a width for the text, otherwise will take the whole width of the parent element.
<div style="float: left">Some text</div>
<hr style="clear: none; position: relative; top: 0.5em;">
Exactly what you want.
Try this. It works
<p style="float:left;">
Hello Text
<hr style="float:left; width: 80%"/>
</p>
You can also use this to draw a line between texts like
Hello -------------------------- Hello
The OP never specified the purpose of the line, but I wanted to share what I ended up doing when I was making an html template where the user needed a line to write on after the document was printed.
Because the hr tag defaults to its own line and defaults to being centered in the line, I decided to use a div and style it instead.
HTML
This is my text.<div class='fillLine'></div>
CSS
.fillLine {
display:inline-block;
width: 200px;
border-bottom: 1px solid black;
}
JSFiddle Demo
Style Div for Line After Text
Hope that helps anyone who had the same goal as me.
hr {
width: {so it fits on the same line as the p tag};
}
p {
float: left;
width: {enough to accomodate the hr};
}
That sort of make sense?
<p>My text</p>
<hr />
Here's one potential approach, but it has some assumptions/requirements. Your question should be edited to give more specific information about what you're building.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Blah</title>
<style type="text/css">
body {
background-color : white;
font-family : Arial;
font-size : 16px;
}
.wrap {
background: transparent url(px.png) repeat-x 0px 85%;
/* Different fonts or text sizes may require tweaking of that offset.
px.png is a one-pixel(though can be thicker if needed) image in whatever color you want the line */
}
.inner {
background-color : white;
/* Should match the background of whatever it's sitting over.
Obviously this requires a solid background. */
}
</style>
</head>
<body>
<div class="wrap"><span class="inner">Here is some text</span></div>
</body>
</html>
I used the following technique:
Give the container div a background-image with a horizontal line.
Put an element (like <h3>) in the container div (I have it on the right so float: right; )
Use the following css:
.line-container {
width: 550px;
height: 40px;
margin-top: 10px;
background-image: url("/images/horizontal_line.png");
}
.line-container h3 {
padding-left: 10px;
float: right;
background-color: white;
}
Below code did the job for me
HTML File:
----------
<p class="section-header">Details</p><hr>
CSS File:
----------
.section-header{
float: left;
font-weight: bold
}
hr{
float: left;
width: 80%;
}
INLINE:
-------
<p style="float: left;font-weight: bold">Details</p><hr style="float: left;width: 80%;">