I am battling with the css to wrap text inside div. I have applied white-spacing, word break but nothing happened.
Link http://fiduciaryconsulting.org/index.php/services/90-services/200-demo
Screenshot of section with issue
Remove white-space: nowrap from the selector .boxes li a and it will work
Remove white-space: nowrap; from the link tag.
Check out these articles for more info about wrapping long words and URLs:
https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
https://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
https://justmarkup.com/log/2015/07/dealing-with-long-words-in-css/
white-space: nowrap; would be the culprit for this one. remove it from the following CSS, or you can comment it out like below:
.boxes li a {
color: #fff;
display: block;
padding: 60px 10px 60px 10px;
text-decoration: none;
background-color: #3366ff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
min-height: 30px;
word-wrap: break-word;
/* white-space: nowrap; */
}
You can find this selector's CSS rules on lines 29-44 on the file: http://fiduciaryconsulting.org/templates/jsn_pixel_free/css/template.css
Related
I try to edit CSS for a list but I did not find how to go to line and to adjust height between list elements properly.
Link to the website : https://denkimedia.com/prod/K2211001/test/
menu open
But I don't know how to fix the size between the list elements :
Display list is not ok
Any idea? :)
I modified position and white-space in article-verticle.css for adjusting the line.
.flowpaper-reflow-tocitem{ position:relative; white-space: normal;
padding, margin, height did not work for adjusting the space between lines.
Please apply below CSS:
li.flowpaper-reflow-tocitem-listitem {
margin-left: -13px !important;
min-height: 38px;
display: flex;
align-items: center;
background: #4f84eb;
margin-bottom: 5px;
border-radius: 5px;
}
li.flowpaper-reflow-tocitem-listitem .flowpaper-reflow-tocitem {
font-family: Lato;
color: #fff;
text-decoration: none;
display: block;
padding-left: 12px;
white-space: break-spaces;
line-height: 1.2;
}
You will get this result:
https://i.imgur.com/KrxyhBS.png
Please let me know if you find any issues
I am examining a third party CSS file, and I am coming across the same class that has the same property set multiple times but with different values each time. I cannot figure out why this is, could someone please shed some light on this?
Example below:
.tabulator .tabulator-header .tabulator-col {
display: inline-block;
position: relative;
box-sizing: border-box;
border-right: 1px solid #aaa;
background: #e6e6e6;
text-align: left;
vertical-align: bottom;
overflow: hidden;
}
.tabulator .tabulator-row .tabulator-cell {
display: inline-block;
position: relative;
box-sizing: border-box;
padding: 4px;
border-right: 1px solid #aaa;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tabulator .tabulator-header .tabulator-col{} - Means that those CSS settings are applied to any HTML element with the class .tabulator-col that is inside an element tabulator-header and that is inside of an element tabulator
So as per your question the both styles are different.
and here is documentation for selectors https://www.w3schools.com/cssref/css_selectors.asp
if two selectors have the same specificity, the last one to be declared wins.
I have used below template to generate HTML, Now the problem is when I resize the window then text in the span not showing correctly, In given screenshot "aborted" word is broken down in two lines which not what I expected. How do I fix this issue?
template: _.template([
'<div class="notes">',
'<label class="control-label"><%=label%>:</label>',
'<span><%=text%></span></div>'
].join("\n"))
CSS:
.notes {
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 3px;
color: #333;
display: block;
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
font-size: 12px;
line-height: 1.42857;
margin: 0 0 10px;
overflow: auto;
padding: 5px 10px;
word-break: break-all;
word-wrap: break-word;
}
div.notes label.control-label {
min-width: 0px;
}
Below is Screenshot from my HTML page.
It looks like you have white-space set to pre-wrap. You need to check if the whole code is injected inside <pre> or you need to reset the white-space property by:
span {white-space: normal;}
I have what I think is some pretty basic css, and it behaves differently in FF4 and IE8.
The CSS in question is like this:
div.showme {
border: 1px dotted blue;
position: absolute;
top :10px;
bottom :10px;
left: 1%;
right: 33%;
overflow: auto;
padding: 0.8em 1em 0.8em 1em;
line-height:1.75em;
}
div.showme a {
padding: 0em 5px 0em 5px;
margin: 0;
white-space: nowrap;
color: #FF00FF;
background-color:#E6E6FA;
border: 1px solid grey;
padding: 0em 4px 0em 4px; }
div.showme a:link { color: blue; }
div.showme a:visited { color: #1E90FF; }
div.showme a:active { color: red; }
The relevant HTML looks like this:
<div class='showme'>
<a href='one'>one</a>
<a href='two'>two</a>
...
</div>
The problem is, the padding is not consistently displayed, in IE8.
In Firefox, it works as I would expect.
working example:
http://jsbin.com/ogosa4
Using the above working demonstration, if you resize the window you will see the padding on the "leading" element on each line within the div, change from zero to non-zero.
How can I fix this?
If you add display: inline-block; to your div.showme a {} the padding will be applied in IE also, but it has some impact with the line height and you may need to specify additional margin's
I have seen this behaviour in Opera too. The padding goes to the upper line. Try display: inline-block and white-space:nowrap if you have more than one word in the link...
You can safely use inline-block in IE7 with inline tags.
http://forumgallery.rollinleonard.com/artists.php
white-space: nowrap; applied to li. gets very screwy in IE. Instead of each .li item staying together and moving to the next line the whole thing becomes one super long line.
Here is the relevant part of the css (text.css)
.artistlist {
margin: 0px;
padding: 0;
}
li.artistlist {
display: inline;
margin: 0;
padding: 0;
font-size: .75em;
line-height: 1.7em;
word-spacing: 5px;
white-space: nowrap;
}
li.artistlist:after {
content:", ";
}
li.artistlist:last-child:after {
content:"";
}
li.last-child{
content:"";
display: inline;
margin: 0;
padding: 0;
font-size: .75em;
line-height: 1.7em;
word-spacing: 5px;
}
ul li{
margin:0;
padding:0;
}
.artistlist li {content: expression(this.previousSibling==null?', ':'');}
The description of the nowrap property of white-space is: "Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a br tag is encountered."
Are you saying that all the li tags are displaying inline? Because that's what you're specifying when you declare "display: inline." With all the list elements inline and unable to break the line without a br tag, you are getting the exact behavior you've defined in your CSS.