I wonder if its possible to control the typography when using wordpress? For example, if a word doesn't fit in the row, it gets hyphenated and doesn't jump to the other row.
The customer I am doing a website for wants the words that doesn't fit in the row to get hyphenated.
Update:
p { hyphens: auto; margin-bottom:24px; font-family:candara,arial,sans-serif; color: #000000; font-weight: 300; }
The hyphens: auto;, didnt work
It sounds like you may have tried something along these lines already, but CSS Tricks gives a more thorough explanation of how the hyphens property is language-dependent. Different languages have different default behaviors for hyphens. Also browser support for the hyphens property is a little spotty, with Chrome only supporting the "none" value.
I found a good answer to this question here:
https://justmarkup.com/log/2015/07/dealing-with-long-words-in-css/
.hyphenate {
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
Related
I'm getting very frustrated with the head titles of some of my pages, I have word-wrap: break-all, and for some reason its breaking the word so im left with a letter on its own,
My css is as follows:
.spacing {
font-size: 22px !important;
letter-spacing: 0 !important;
line-height: 28px!important;
width: 80%;
margin: auto;
word-break: break-all;
word-wrap: break-word;
}
it's become infuriating I've tried word-wrap and word-break but none of them seem to be doing what I ask, any ideas why this is happening on the letters in the word rather than the word its self.
word-break: break-all; signifies that there can be a break between any two letters, even in the middle of a word. Try word-break: normal; (or perhaps even just removing word-break) and see if that fixes the issue.
Reference
I have these div's on my site and they contain text which is sometimes too wide to fit the h4 elements within.
Right now I've applied these styles to this particular h4:
h4 {
font: {
family: "Nexa";
size: 3.25em;
weight: 600;
}
line-height: 135%;
letter-spacing: 0.15rem;
text-transform: uppercase;
}
I'm using the em measurement to change its' size. Is there a more appropriate measurement for this situation?
EDIT EXPLAINING HOW MY QUESTION IS NOT A DUPLICATE: Using the viewport unit of measurement will not help in my situation considering my styles are interdependent. I've tried it to confirm.
You can try out this:
h4 {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
And you need to set the language in a ancestral HTML element:
<article attr1="valor" attr2="valor" ... lang="en">
or
<html attr1="valor" attr2="valor" ... lang="en">
See more:
Css Tricks
I've decided to use an if ... in conditional to check an array of problematic titles. This array contains titles that don't fit the container properly. If the site is in the array of those titles I apply a class called smaller to the h4 containing the problematic title. I don't know if this was the best approach but it's solved the problem. Thanks to everyone who offered help!
Internet explorer keeps on splitting my words. Chrome and Firefox are working fine.
Here is my code and the link to the website: http://www.hgsainc.com/about/
Thanks for your help!
.page #main .entry-content {
width: 100%;
padding-right: 0;
word-wrap: normal;
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
table-layout: fixed;
}
.page #main .entry-content p,
.page #main .entry-content span {
font-size: 16px;
line-height: 30px;
text-align: right;
}
I haven't looked at your site, but it looks like you need to add the -ms-hyphens prefix to your css. You have the -webkit and -moz but no -ms:
-ms-hyphens: none;
See here for more info: http://msdn.microsoft.com/en-us/library/ie/hh771871(v=vs.85).aspx
Also, after looking into it a bit more, it looks like Opera doesn't support this, and neither do most mobile browsers: http://caniuse.com/css-hyphens - Just a heads up in case you come across that down the road.
After checking the developer tools in Internet Explorer, inspecting the paragraph that was having this problem showed a -ms-hyphens:auto; style in your code. You should probably add a style with -ms-hyphens:auto; to your block of styles to prevent this from happening.
The style that causes this is placed in http://www.hgsainc.com/wp-content/themes/twentythirteen/style.css, at the * 5.3 Entry Content part. You can also remove the hyphens styles from there to prevent having to do this.
I'm using Twitter bootstrap in my site and I'm having span which may contain long word and I need to break it. I use this Css but not working? what's problem?
.fidDivComment {
white-space: pre-wrap;
display: inline-block;
}
You need to add this to your CSS for that span
span {
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
See this article for an explanation.
The questions stated this:
(using Twitter Bootstrap)
so the bootstrap fix is this: #include hyphens; this bootstrap out of the box mixin will add word-wrap: break-word;
this mixin is exist under this path:
/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_vendor-prefixes.scss
If I have a very long string (without spaces!). Can I force the browser to line break it, for example, in a table's td via CSS. Width does not seem to have any effect.
Note: I know it is very unlikely for someone to submit a long string without spaces but you never know ...
I tried:
.gridrow td
{
padding: 1em;
text-align: center;
word-wrap: break-word;
}
and I use FF as my browser. word-wrap only seems to be used in CSS3?
I think what you mean is in CSS:
#id
{
max-width: 100px; /*or whatever*/
word-wrap: break-word;
}
Tested on your site with Firebug, it works.
Reference article.
Tables are a special case. They'll keep on expanding if they can, so as not to obscure any content; you can't use overflow: hidden on them either. Here are some options:
Use an optional breaking character. (Source: http://www.quirksmode.org/oddsandends/wbr.html ) If you can control insert a character like or <wbr> programatically into long strings, this may be a solution.
Perhaps preferably, depending on your situation, you can limit the table to use strict widths, at which point it should obey your rule:
table {
table-layout: fixed;
width: 100%;
}
table td {
word-wrap: break-word; /* All browsers since IE 5.5+ */
overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */
}
i think there wordwrap element. search for the wordwrap.
word-wrap: break word
EDITED
REF Word-wrap in a html table
it suggest that there's no good way of doing this.