html/css break line at midpoint
I want to print a title that will span two lines, with the line broken as near the mid-point as possible.
For example, if the title was, say,
"A Mid-Summer Night's Dream"
I don't want it to break as
"A Mid-Summer Night's"
"Dream"
but more like
"A Mid-Summer"
"Night's Dream"
If the title is long enough to require three lines, I want the lengths of all three to be as close to the same as possible. Etc.
Any way to do this with CSS? Please don't ask me what I've tried so far because I've got no ideas at all. :-(
Addendum
Oh, I see from several comments and answers that my question was incomplete. I don't want to embed a br or whatever because, (a) the text is coming from a database, and I don't want to require the user to enter tags, and (b) this is a responsive design, so on a desktop the text should fit on two lines but on a cell phone it might require three, and I don't want arbitrary additional line breaks. For the moment I am requiring hard-coded br's because I don't have another idea, and I have a media query that sets these br's to display:none for cell phones because wrapping wherever it wants on small screens is giving me better results.
If I understand it correctly, justify is what you are looking for
CSS property : text-align: justify;
Additionally, you may also want to use text-justify: inter-word;
http://www.w3schools.com/cssref/css3_pr_text-justify.asp
EDIT: Just checked that this property is only supported in IE
use white-space:nowrap
Ok if the content is something look like the below
<div>A Mid-Summer Night's Dream</div>
Then use the following
<div>A Mid-Summer <span style="white-space:nowrap;">Night's Dream</span></div>
put the contents inside the span which you don't want to break. Let me know if it is worked
You can use white-space: pre-line;
to make elements act like <pre>
, which preserves newlines. Example:
<style>
p {
white-space: pre-line;
}
</style>
<p>A Mid-Summer
Night's Dream</p>
Demo here
链接地址: http://www.djcxy.com/p/28596.html上一篇: Akka Http:超过配置的最大值
下一篇: 在中点html / css断线