Is there any CSS trick to display multiline text paragraphs in a button control. I don't want "pre" tag or Javascript solutions, because I will have a large number of button widgets!,
The below code is for your convenience:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Single Line Buttons</h1>
</div>
<div data-role="main" class="ui-content">
This should be a multiline Button containing sevaral lines of text like a paragraph
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
For your example code, just add the CSS:
.ui-btn {
white-space: normal;
text-align: left;
}
The normal white-space allows the text to wrap, while the text-align gives a standard left aligned paragraph. If you want to keep the center alignment, just remove text-align from the CSS.
Here is a DEMO
You can use the white-space css property if the text has line breaks like you want it.
.ui-btn { white-space: pre; }
Though, your selector may have to be more specific to override the default jquery-mobile styles.
Ex:
.ui-content .ui-btn { white-space: pre; }
http://jsfiddle.net/e00889yz/
Update:
The issue here is that jquery mobile's stylesheet defines white-space to be nowrap for the "ui-btn" class. So you have to override that property with a more specific css selector or the "!important" flag with either white-space pre (if your text already has line breaks) or as ezanker noted, white-space normal (if it does not have predefined linebreaks)
http://jsfiddle.net/e00889yz/1/
Related
Don't know if it has a normal explanation or if it is some kind of extrange behaviour, but i have faced the next issue in HTML:
I have the following paragraph:
<p>
You have <strong>32</strong> items
</p>
Nothing so special and works fine.
(Result: You have 32 items)
But if i add the following style:
<p>
You have <strong>32</strong> items
</p>
<p style="height:20%;">
You have <strong>32</strong> items
</p>
The number in "strong" looses the spaces before and after it.
(Result: You have32items)
Why is it?
P.D: It behaves the same with "b" tag.
More info:
I'm testing in Chrome and Firefox with a IIS server (both fails).
I couldn't reproduce it in Fiddle, so it could be something that i'm missing in my code...
More info:
here is the complete scss:
$header_height: 10%;
$footer_height: 20%;
$body_height: 100% - ($header_height+$footer_height);
$container_frame_padding: 0.5em;
html{
height:100%;
body.vcAllowOverflowContent{
height:100% !important;
.vcPopupContainer{
height:100%;
.vcPopupTitle{
height:$header_height;
display:flex;
justify-content:center;
font-size:$bigger_font_size;
padding:$container_frame_padding;
}
.vcPopupBody{
height:$body_height;
border: solid black 1px;
overflow:auto;
padding:$container_frame_padding;
}
.vcPopupFooter{
height:$footer_height;
}
}
}
}
and here a more complete html:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MutipleDelete</title>
#Styles.Render("~/Content/Bootstrap")
<link rel="stylesheet" type="text/css" href="~/Content/vcPopups.min.css" />
</head>
<body class="vcAllowOverflowContent">
<div class="vcPopupContainer">
<p class="vcPopupTitle">
¿Desea borrar estos <strong>#Model.Count</strong> pacientes?
</p>
<div class="vcPopupBody">
...
</div>
<div class="vcPopupFooter">
...
</div>
#Scripts.Render("~/Scripts/Jquery")
#Scripts.Render("~/Scripts/Bootstrap")
</div>
</body>
</html>
As you can see i'm using Bootstrap and Razor.
If i remove the "vcPopupTitle" class, the paragraph behaves normally.
It's strongly recommended (since HTML 5) that, if possible (even if not), use span class="foo" and then apply font-weight:bold; to this class, instead using html tags for text formatting.
And you cannot set width of text on %, must use px, em or rem, see the example below:
p{font-size:1.2rem;}
p.ps{font-size:1.6rem;}
span.foo{font-weight:bold;}
div.container{height:86px; overflow:auto; border:0.1rem solid black;}
.section1{height:40%; border:0.3rem solid blue;}
.section2{height:60%; border:0.3rem solid red;}
<div class="container">
<div class="section1">
<p>
You have <strong>32</strong> items
</p>
</div>
<div class="section2">
<p class="ps">
You have <span class="foo">32</span> items
</p>
</div>
</div>
Take care about tag default properties and for which job are each one.
P tag is a paragraph and cannot take height property "as is". it will take 100% of the container on width, and the height it need. If you want to limit the height of a p tag, you have to limit the container of this p instead force limit to self P tag.
Note that if you try to force a container to a height and the content overflow its parent container, it will not take visible effect due to font-size (on this case) so you'll need to use another font size (and better specify it as rem, that means realtive em).
Ok, problem solved.
It has to be with the "display: flex;" and "justify-content:center;" styles.
I was applying those styles to a "p" tag, so the elements within it (text and strong) aligned to the center and spaces between them were removed.
Solution:
<div class="vcPopupTitle">
<p>
You have <strong>32</strong> items
</p>
</div>
Now the "flex" display will work on the paragraph and not on its elements.
I use includetext-function to include html* into a ms word 2010 document:
{ INCLUDETEXT "test.html" }
That's the html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
line-height: 100%;
}
p {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<p>Line 1<br/>Line 2</p>
</body>
</html>
I didn't manage to fomat paragraph spacing in word within the html/css. Neither the margin nor the padding property works. All other css properties I checked (font*, white-space, color) are working fine.
Without <p>-tag word sets paragraph spacing to 10 pt, within <p>-tag, I get "auto", which also makes trouble in my complete document.
Which css property is word-compatible to define paragraph spacing?
Thanks a lot.
(* xml with xslt stylesheet - but for demontration simplified)
Use id or class in every p tag(I know it's boring but try it) . I think that'll might work. And also try article or blockquote tag
The margin-property gets only accepted, if I add the property within the style-attribute. Inside the css-class, word ignores it.
This line works fine:
<p style="margin:0">Line 1<br/>Line 2</p>
strange behavior :-(
The following is my code.
<!DOCTYPE html>
<html lang="en-UK">
<head>
<meta charset="utf-8">
<title>Test Webpage</title>
</head>
<body>
<h1>This is the Heading of the webpage.</h1>
.mainpara {background-color: #d3e5f2;}
<div class="mainpara">
<h3>And it will be the <strong>heading 2</strong>, main content body.</h3>
<p>This is another body, composed of plain text. It's defined internally as a paragraph. Some style will be applied to this and the above heading 2 text by CSS applications.</p>
</div>
<h6>Note that this webpage designing enthusiasm was generated out of necessity for edition of the theme at Japanaddicts, a website of <strong>cool people</strong> specialising in <em>Japanaddicting</em> others.
<p style="color: #f60; font-size: 15px;">This is a line now. Yes another one. However, an inline CSS has been applied to it. This particular paragraph has a different style. It's troublesome, this inline CSS but it's experimental.</p>
</body>
</html>
As you can see, there's a "mainpara" division. How do I specifically apply styling to it? I tried .mainpara {background-color: #d3e5f2;}, as you can see. I also tried putting it above the class.
You need to put CSS in a stylesheet, not as free text in the middle of your HTML.
Either use a style element or (preferably) put your CSS in an external file and reference it with a link element (both of which would go in the head, not the body).
There are examples of both in the specification
<style>
.mainpara {background-color: #d3e5f2;}
</style>
you can not write css code in html page without using style tag
<!DOCTYPE html>
<html lang="en-UK">
<head>
<meta charset="utf-8">
<title>Test Webpage</title>
<style type="text/css">
<!-- ALL STYLES SHOULD BE DEFINED HERE OR MOVED INTO A SEPERATE STYLE SHEET FILE THEN IMPORTED -->
.mainpara {
background-color: #d3e5f2;
}
<!-- Changes color and font size for all p tags on page -->
p {
color: #f60;
font-size: 15px;
}
<!-- Use an id for specific p tag -->
#customParaStyleId {
color: #f60;
font-size: 15px;
}
<!-- Use a class when you plan to apply it to many p tags on the same or additional pages -->
.custParaStyleClass {
color: #f60;
font-size: 15px;
}
</style>
</head>
<body>
<h1>This is the Heading of the webpage.</h1>
<!-- CLASSES ARE USED TO REPEAT STYLES ACROSS SITES -->
<div class="mainpara">
<h3>And it will be the <strong>heading 2</strong>, main content body.</h3>
<p>This is another body, composed of plain text. It's defined internally as a paragraph. Some style will be applied to this and the above heading 2 text by CSS applications.</p>
</div>
<h6>Note that this webpage designing enthusiasm was generated out of necessity for edition of the theme at Japanaddicts, a website of <strong>cool people</strong> specialising in <em>Japanaddicting</em> others.
<!-- USING ID AS EXAMPLE TO TARGET SPECIFIC SINGLE TAG -->
<p id="customParaStyleId">This is a line now. Yes another one. However, an inline CSS has been applied to it. This particular paragraph has a different style. It's troublesome, this inline CSS but it's experimental.</p>
</body>
</html>
CSS should be separated from the body of your HTML Code. It can be placed in either a separate style sheet that you import/include or it can appear between a <style type="text/css"><!-- YOUR STYLES HERE--></style> tags.
TIP:
Often I begin designing and manipulating styles in the head before separating them out into a style sheet. This allows me to focus on the design without having to worry about whether I attached the style sheet properly or not.
Once I finish the page I then move the working styles to a separate sheet to provide re-usable styles across the entire site.
<style>
.mainpara {background-color: #d3e5f2;}
</style>
If you have a stylesheet file or style.css you can just insert:
.mainpara {background-color: #d3e5f2;}
inside of the style.css file
In this sample
<html>
<head>
<style>
.q_show_spaces {
white-space: pre-wrap;
}
.q_inline {
display: inline;
}
.q_no_wrap {
white-space: pre;
}
</style>
</head>
<body>
<div style="width:400px;border:solid 1px">
<div class="q_show_spaces"><div class="q_inline">To testaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div><div class="q_inline q_no_wrap"><div class="q_inline">aaaaaaaaaaaaaaaaaaaaaa aaaaaaabbb, </div></div><div class="q_inline">by like terms</div></div>
</div>
<br />
<br />
<div style="width:400px;border:solid 1px">
<div class="q_show_spaces"><div class="q_inline">To testaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div><div class="q_inline q_no_wrap"><div class="q_inline">aaaaaaaaaaaaaaaaaaaaaa aaaaaaabbb,</div></div><div class="q_inline"> by like terms</div></div>
</div>
</body>
</html>
In the first example, content is going outside the div, but in second example content is as expected, only change is that space is moved out of div.
How to fix this? I dont want to move space outside, also do not want to remove any div or styles on div. suggest any new style which can override these and work correctly.
Sorry for improper formatting of HTML.
It seems you are looking for word-break: break-all css property.
Apply like this in your css:
.q_show_spaces {
white-space: pre-wrap;
word-break: break-all; /* or break-work, if you planning to break a word */
}
Working Fiddle
MDN Article
Unfortunaly this site we're developing has to be IE6 compatible. It contains a horizontal block style menu, but there's still one more problem with IE6.
I have the following code:
<html>
<head>
<style type="text/css">
a {
display: block;
width: 0px;
background-color: red;
}
</style>
</head>
<body>
This is a anchor tag
</body>
</html>
Because of the spaces, it wraps every word on a new line. What do I need to do if I want it on a single line only?
Thanks!
Add this css on the a element:
white-space: nowrap
Have you tried popping your anchor into a span or div?
Well, don't set its width to 0 would be the cross-browser proper approach.
Use float: left instead, if you want the anchor to be displayed in block mode but not allocate 100% width.
When you use floats like that, you also need to make sure you clear them, to make them occupy space in their container:
<div>
<a ... />
<a ... />
<div style="clear: both;"></div>
</div>