I am making a mobile web application to display church hymns. A verse in a hymn should ideally not be broken into two lines when it exceeds the width of the screen, but it cannot be avoided with varying mobile screen sizes.
Instead I would like to have text, that's is wrapped to a new line, be right aligned.
How do I with CSS ensure that wrapped text is right aligned and where the text otherwise is left aligned.
Screenshot of how I want the result to look like:
Here is my HTML:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br/>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br/>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
You can make each verse in a tag and use text-align-last. The problem is the poor compatibility (no mobile nor safari).
p {
-moz-text-align-last: right;
text-align-last: right;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
You can see values and compatibility in MDN:
https://developer.mozilla.org/es/docs/Web/CSS/text-align-last
Related
I have a paragraph with a style like this:
<p style={{display:'flex', justifyContent:'flex-end'}}>{props.message}</p>
The following with mutliple lines looks like this:
As you can see it starts from right to left with small message, but if I have more text I want to achieve multiple lines like at the first message. How can I do that? Thanks in advance.
Edit: I tried all of the SO answers in wrapping but they didn't work.
With this same result:
<p style={{display:'flex',flexDirection:'row', flexWrap:'wrap-reverse', justifyContent:'flex-end'}}>{props.message}</p>
You can try setting a max-width on the element that contains the text.
p {
max-width: 45ch;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
How to make page like this example using bootstrap 4? Have H1,p and img tags
text continues below, possible without grid? This content generated from admin panel, with standart tinymce.
You don't need Bootstrap, you just need float: right style on <img> tag.
If you need to do it with Bootstrap for some reason, use float-right class.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div>
<img class="float-right" style="width:400px; height: 200px;">
<h1>Lorem Ipsum</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
I have a React-Bootstrap Panel with a short title but possibly wide collapsible content, like so:
<Panel>
<Panel.Heading>
<Panel.Title toggle>
Hello
</Panel.Title>
</Panel.Heading>
<Panel.Collapse>
<Panel.Body>
Really wide body. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</Panel.Body>
</Panel.Collapse>
</Panel>
This results in a really thin Panel.Heading when collapsed, but a really wide Panel.Heading when expanded, like so:
My question is, how can I make the width of my Panel.Heading match the width of Panel.Body, even when collapsed?
I've noticed an anomaly in Edge and IE when using flexbox with scrolling columns coupled with a horizontal scroll. The following codepen demonstrates correct functionality in Chrome and FireFox; however, there is an extra scroll bar on the very right of the view for a slight vertical overflow (the height of the horizontal scroll bar) that is only present in IE 11 and Edge:
Original Codepen Example
The raw html for reference:
<body>
<div class="app-master">
<div class="app-sidebar-spacer">
</div>
<div class="app-content">
<div class="app-header">
<div class="ui secondary small menu">
<a class="right item">
<div>
<span>happy text</span>
</div>
</a>
</div>
</div>
<div class="app-work-zone">
<div class="app-zone-content">
<div class="ui segment app-zone-segment">
</div>
</div>
<div class="app-zone-buffer">
</div>
<div class="app-zone-content">
<div class="ui segment app-zone-segment">
<div>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem
ip"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
sum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
</div>
<div class="app-zone-buffer">
</div>
<div class="app-zone-content">
<div class="ui segment app-zone-segment">
</div>
</div>
<div class="app-zone-buffer">
</div>
</div>
</div>
</div>
</body>
The raw css for reference:
html,
body {
height: 100%;
margin: 0;
min-height: 100%;
padding: 0;
}
.app-master {
display: flex;
flex-direction: row;
height: 100%;
}
.app-sidebar-spacer {
flex: 0 0 215px;
background-color: #2959a5;
}
.app-content {
flex: 1 1 auto;
display: flex;
flex-direction: column;
overflow-x: auto;
}
.app-header {
min-height: 43px;
}
.app-header>.ui.menu {
width: 100%;
}
.app-work-zone {
flex: 1 1 auto;
display: flex;
flex-direction: row;
min-height: 0;
}
.app-zone-content {
flex: 1 1 0;
min-width: 600px;
}
.app-zone-buffer {
width: 2px;
text-align: center;
}
.app-zone-segment {
height: 100%;
overflow-y: auto;
}
Notes:
I have semantic-ui loading in the codepen for basic styling, but the layout is developed using pure flexbox (not the semantic grid system).
Semantic ui already uses normalizer, so it is turned off in the codepen css.
In codepen I have "autoprefixer" turned on.
When viewing in IE, adjust the height of the preview window, and the preview window's vertical scroll bar will suddenly show scrolling.
All of my custom classes are prefixed with "app-".
Below are pictures of what seems to be a working implementation of this concept by the folks over at Asana; however, I am struggling to understand the implementation.
Image 1) With the window collapsed resulting in correct horizontal scrolling in Edge, no content hidden at the bottom of the screen, and no extraneous scroll bar at the very left of the view:
Image 2) With the window expanded (and no horizontal scrolling in Edge to demonstrate no content was hidden when horizontal scrolling was in effect):
So, is this actually a bug in IE and Edge, or does the seemingly functional implementation by Asana demonstrate a work around?
Edit 1) Added more in-depth description of the anomaly.
Edit 2) Added updated codepen link to track cross browser progress.
Edit 3) Updated final codepen with functional hacks. Functionality should now look identical across IE11, Edge, Chrome, and FF. The complete functional hack list is:
#supports (-ms-ime-align: auto) and (not (object-fit: cover)) {
.app-content {
overflow-x: scroll;
}
}
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.app-content {
overflow-x: scroll;
}
}
The following media query reverts overflow-x to auto in browsers where it was set to scroll (see hacks just above this one) when the browser width is greater than 825px. This number is derived from the 225px used for the left side-nav, and the 200 px minimum used for each flexbox item to the right of the side-nav. This prevents an extraneous horizontal scroll bar in IE11 and Edge when browser width is greater than 825px.
#media (min-width: 825px) {
.app-content {
overflow-x: auto;
}
}
Final (updated with functional hacks) Codepen Example
This is obviously a bug (haven't found any bug report yet and will update when I do).
I have tested this with Edge on Windows 10 Fall Creators Update version (Microsoft EdgeHTML 16), and is now fixed and work as it should.
Here is another post about the same issue, where one workaround for IE is to use scroll instead of auto (overflow-x: scroll)
Updated based on a comment
This is an attempt to find a CSS based hack that will detect IE 11 and Edge 12-15.
This IE 11 CSS hack appears to work properly:
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.app-content {
overflow-x: scroll;
}
}
For Edge this CSS hack appears proven to work:
The following hack seems to work to find Edge:
#supports (-ms-ime-align: auto) {
.app-content {
overflow-x: scroll;
}
}
Though this also catch Edge 16, but here we got lucky as Edge 16 added support for object-fit
So by simply check for both the (-ms-ime-align: auto) and (not (object-fit: cover)), we should be able to actually distinct Edge 12-15 from 16
#supports (-ms-ime-align: auto) and (not (object-fit: cover)) {
.app-content {
overflow-x: scroll;
}
}
As noted, Microsoft appears moving to remove as many -ms prefixed properties as possible in future MS Edge, though we don't mind, as we want to target the older versions that still has them
I have tested the above 2 CSS hacks with success on IE 11 and Edge 16 using this Codepen:
https://codepen.io/anon/pen/RZYeJo
If anyone find this not work on a specific Edge version, please let me know so I can keep this post up to date.
For you who prefer to use Javascript, here is a post with some interesting reading:
Instead of using prefixes I want to ask site visitors to upgrade their browser
As far as I know, "absolute" tag will not coupe with responsive design of my theme.
If I position my image div container with proper numbers for full width window (and vise versa), it will not float along with other elements if I tighten up my brwoser window .
I think it will take a heap load of time before I will figure out myself.
Take off min-width from the image and it will re-size correctly. The min-width is restricting it from re-sizing correctly. To stop it being tiny you can use the min-width just make it less then 700px as that is only a small jump in size. You could also use media queries to make it 70% width at that screen size.
I think this is what you are wanting it to do?
position: absolute should rarely be used for page layouts (except for small elements here and there), because it takes elements out of the flow of the document, meaning that other elements can't respond to it.
You can get the effect you want there by floating the dog image to the right and using a "sandbag" effect to push it down through the text. Here is a basic example of how it works:
http://codepen.io/anon/pen/uymJI
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.outer {overflow: hidden;}
.wrapper {width: 50%; margin: 0 auto;}
.image {
float: right;
margin-right: -600px;
}
.image:before {
content: " ";
height: 300px;
width: 1px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="outer">
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="image"><img src="http://podstrigis.com/wp-content/uploads/2013/05/1dreamstime_xxl_25491444.png" alt="Dog listening on can phone"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
</body>
</html>
EDIT: based on comment below, another (though ultimately inadequate) attempt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.outer {overflow: hidden;}
.wrapper {width: 50%; margin: 0 auto; }
.ofl {overflow: hidden;}
.image {float: right; margin-right: -600px;}
.map {clear: both; }
.map div {width: 100%; height: 300px; background: green;}
#media only screen and (min-width: 1500px) {
.image {margin-top: 0;}
.dog {margin-top: -258px;}
.spacer {float: right; width: 300px; height: 265px; background: white;}
.map {margin-top: 258px;}
.spacer:before {
content: " ";
height: 300px;
width: 1px;
overflow: hidden;
}
}
</style>
</head>
<body>
<div class="outer">
<div class="wrapper ofl">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p><div class="spacer"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class="wrapper dog">
<div class="image"><img src="http://podstrigis.com/wp-content/uploads/2013/05/1dreamstime_xxl_25491444.png" alt="Dog listening on can phone"></div>
</div>
<div class="wrapper ofl map">
<div></div>
</div>
</div>
</body>
</html>