div 中的文本:自动换行时在中间拆分 [英] Text in a div: splitting in middle when it word wraps

问题描述

我有一个居中的文本短语，在某些设备上可以放在一行，但在其他设备上会变成两行.文本位于 div 中.在某些设备上，它只是太长了，所以只有最后一个字换行.从美学上讲，这看起来很糟糕.我希望我能做的是在中间分割短语，所以每行都以相似的长度居中.

我已经尝试过这个 CSS:

文本对齐:居中；边距:0 自动；宽度:100%；

但这只会让我解决我描述的问题.在谷歌搜索如何进行之后，我还没有找到任何可行的解决方案.实际上，我没有发现有人试图提出同样的问题，所以我怀疑我的搜索词有问题.如何在文本中间而不是在右侧自动换行?

解决方案

这是 HTML 和 Web 开发工作方式的内在本质.它自然是响应式"的.并且文本将在其父元素的宽度处换行.我从你那里听到的是你不想让寡妇"在你的文字中.在 web-dev 中这不是一个容易解决的问题，但是我发现了一些技术，其中大多数需要一些手动注意，考虑到每个实例都可能是唯一的，这在某种程度上是合适的.

如果您有精确的布局，您可以在父元素上设置 width 或 max-width，并在需要时使用媒体查询进行更改.

HTML

<p>Curabitur blandit tempus porttitor.Nulla vitae elit libero, a pharetra augue.</p>

CSS

.parent {最大宽度:288px；}@media(最小宽度:600px){.父母{最大宽度:568px；}}

---

另一种技术是在最后两个单词之间添加一个不间断空格  ，有效地使它们成为一个单词，如果没有另一个单词，则不会换行到新行.这看起来更好一些，并且可以很好地工作，尤其是当它们是短词时.

HTML

<p>Curabitur blandit tempus porttitor.Nulla vitae elit libero, a pharetra&nbsp;augue.</p>

---

另一种技术与   类似，但我们使用 span 和样式来实现相同的目的.这在 CMS 编辑器或您需要设置分组样式的地方或在不间断空间不起作用的地方可能很有用.

HTML

<p>Curabitur blandit tempus porttitor.Nulla vitae elit libero，一个<span class="nowrap">pharetra augue.</span></p>

CSS

.nowrap {空白:nowrap；}

I've got a centered text phrase that fits on one line in some devices, but wraps into two lines on others. The text is in a div. On some devices it's just barely too long, so only the last word wraps. Aesthetically, this looks bad. What I wish I could do is split the phrase in the middle, so each line is centered at a similar length.

I've tried this CSS:

text-align: center;
margin: 0 auto;
width: 100%;

but that only gets me to the problem I described. After googling for how to proceed, I haven't found any viable solutions. Actually, I'm not finding anyone trying to ask the same question, so I suspect there's something off about my search terms. How do you word wrap in the middle of the text instead of on the right side?

解决方案

This is the intrinsic nature of how HTML and web dev works. It is naturally "responsive" and text will wrap at the width of its parent element. What I am hearing from you is you would like to keep from getting "widows" in your text. This is not an easy problem to fix in web-dev, but there are a few techniques I have found, most of them require a bit of manual attention which in a way is appropriate considering every instance can be unique.

If you have a precise layout you can set a width or max-width on the parent element, and use media queries to change it when needed.

HTML

<div class="parent">
    <p>Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue.</p>
</div>

CSS

.parent {
    max-width: 288px;
}

@media (min-width: 600px) {
    .parent {
        max-width: 568px;
    }
} 

---

Another technique is to add a non-breaking space   between the last two words, effectively making them one word that will not wrap to a new line without the other. This looks a little bit better and can work well especially if they are short words.

HTML

<div class="parent">
    <p>Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra&nbsp;augue.</p>
</div>

---

Another technique is similar to the   but instead us a span and styles to achieve the same thing. This could be useful in a CMS editor or where you need to style the grouping or somewhere a non-breaking space won't work.

HTML

<div class="parent">
    <p>Curabitur blandit tempus porttitor. Nulla vitae elit libero, a <span class="nowrap">pharetra augue.</span></p>
</div>

CSS

.nowrap {
    white-space: nowrap;
}

这篇关于div 中的文本:自动换行时在中间拆分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！