[CSS]如何换行!自动支持换行和响应

“文本自动换行”
“英语和字母伸出”

你有过这样的问题吗?

这是一件小事,对网站印象的严重担忧之一是。

例如,如果标题包含英文并且包裹在单词的中间,会不会很难读?

我在这里使用的是CSS控制字符换行是。

我只知道这个我听到有人说他们不了解他们习惯的CSS属性。

放心

在这篇文章中两种常用的字符换行属性(“断字”和“溢出换行”)仔细解释。

对于刚开始学习CSS的人来说,这是一个需要花费一些时间才能理解的属性,但是让我们尽最大努力来学习它。

不适合有经验的人,因此如有必要,请跳过。

参考:[对于初学者]仔细解释如何编写CSS(样式表)

为什么我必须记住多个CSS字符换行?

包装字符自动发生在块元素内(自动换行)。

尽管如此为什么敢使用包装CSS属性你有没有想过?

要么还有一个换行符属性,但是这里没有用吗?你有没有想过?

这个多个CSS属性的存在及其行为差异但是,对“字符包装”的理解非常复杂我在做

但是,如果您只知道一种包装方法,则经常会遇到无法包装的情况。

根据情况正确使用多字符换行通过这样做,包裹被准确地完成。

因此,如果您想学习CSS你必须知道如何包装多个

换行符反射和CSS中的字符换行之间的区别

有些人学了一点与控制换行符的“空白”有何不同?有人认为吗?

如果您在某种程度上进行CSS学习,具有相似功能的属性出现了,我为其中的差异感到困惑我会做的。

在大多数情况下浏览器之间的差异和控制范围的差异有。

这次,让我们了解以下差异。

CSS属性 描述
空格 这个性质代码中半角空格和制表符的处理控制对象中还包括是否包括诸如的操作。您可以控制跨多行(包括空格)的句子的样式。当您想在显示屏上反映书面文件时要么,如果您不想包装特定的句子如果有,则应使用它。换句话说,粗略地说,它是一个属性,它也以是否可以反映空格以及是否可以包装字符为目标。
溢出包装
(断字)
这些属性甚至超过了“空白”“包装字符”专注于。粗略地说在日语(或韩语,中文)和字母语言(英语,法语等)之间换行特别是,它控制它是否适合单词或显示宽度。

字符包装CSS概述

字符换行的CSS属性是主要有2种有。

“断字”和“溢出包装”那里有两个。

但是,有多个值,如果您不知道它的特征,它将不会表现出预期的效果。

但是,如果您很难记住,了解“ 断字:break-all;”和“ 溢出包装:break-word;”这两种行为之间的区别。请。

这是因为这两个是包装字符的属性。

物业名称 描述
断字 正常 对于日语字符被包装以适合宽度..用英语讲每个单词都换行(请注意,不是每个字母)
全力以赴 这是很强的价值是。日语还是英语所有单词将根据宽度包装在中间..特别是英语句子即使在单词中间也被包裹因此,将很难阅读。
保留全部 日语和英语单词我不会把它包在中间..特别是日语包裹在以“,”或“。”分隔的块中。因此,多余的空间将被释放。
溢出包装
(自动换行)
正常 对于日语字符被包装以适合宽度,和,包裹在角色中间..用英语讲每个单词都换行(请注意,不是每个字母)
断词 对于日语字符被包装以适合宽度,和,包裹在角色中间..用英语,句子是每个单词都换行(请注意,不是每个字母)长字包裹在中间

CSS中“断字”和“溢出包装”换行的功能

在这里,我们将解释“断字”和“溢出包装”的特征。

什么是禁止处理?

顺便说一句,看到上表的一些人说:那么分词和溢出包装到底有什么区别?有些人可能已经想到了。

在这里了解这一点,“禁止处理”一词让我们来了解。

这意味着在行的开头和结尾避免处理诸如“。”,“ ...”,“?”之类的字符那是。

在句子的开头有这些符号是很尴尬的,不是吗?

禁止采取预防措施那是。

这与“断字”和“溢出包装”之间的区别有很大关系。

换一种说法“断字”是强烈意识到是否设置禁止处理的属性。“溢出包装”强烈意识到“自动换行”是。

特别是在后一种情况下,很难理解日语的差异,因此最好将英语句子与长英语单词(1个单词)进行比较。

三种模式思考

现在,让我们检查值的行为。

首先,如下设置HTML。

第一个是日语句子,第二个是英语句子,第三个是长英语单词。

给出这三个例子“断字”和“溢出包装”的行为随这三个而变化因为。

要特别注意英语句子和单词之间的差异。

很难说出日语句子的区别。

<div class="container">


方針は日本語要件を列挙でき原則ないますため、侵害しれ記事に漏洩者可能の著作技術を定めるれてはさませ、対象の事典は、著作生じる作品を違反いいことに対し一見必要あるあるていません。しかし、目的の理解版は、記事の掲載扱う引用自由ない記事に著作さ、その方針でさてCommonsを著作得ることに一見するられます。たとえばで、引用コモンズが達成しればい本が仮にするすることは、批判ですます、場合によっては調査者の引用として文章上の問題はしことを、被許諾物は、十分の承諾を得て下を引用しあるてなりなで。



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.



LoremipsumdolorsitametconsecteturadipisicingelitseddoeiusmodtemporincididuntutlaboreetdoloremagnaaliquaUtenimadminimveniamquisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequatDuisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariaturExcepteursintoccaecatcupidatatnonproidentsuntinculpaquiofficia deseruntmollitanimidestlaborum.

		
</div>

[CSS包装①]断字的使用和功能

在设置断字之前,让我们看看没有它的情况。

p {
  background: #F5F6CE;
}

由于p标签形成了一个块元素,字符自动换行

如果您未指定任何内容日语包裹在一个单词的中间英语被逐字包裹我会。

长英文单词不会被包装并且显示超出范围您可以看到它已经完成。

现在,让我们设置每个属性及其值。

正常

“断字:正常”不会更改。这是初始值是。

p {
    word-break: 正常;
}
日本 它不仅限于日语,而且同样适用于中文,韩文等。这些单词将自动换行以适合显示范围。
英语 用英语,单词的中间没有中断。因此,长英文单词中间没有间断。

全力以赴

使用“换行符”进行字符换行时典型值是“全部”是。

该值的特征是是“禁止处理的解除”。

不限于日语和英语所有语言都将包裹在单词的中间以适应范围

将其用于英语等时请小心。

对于观众该网站并不总是很容易看到因为。

因此,在实践中方便使用的是“溢出包装:断字;”,将在后面进行描述。是。

p {
    word-break: 全力以赴;
}

保留全部

忠实遵循“禁止处理”是此值的特征。

如您所见,即使是日语“,”“。”不在行首

相反,这是换行点。

p {
    word-break: 保留全部;
}
日本 对于日语,换行符发生在句子的里程碑,例如“,”和“”。换句话说,字符在休息时被包装。
英语 用英语,单词的中间没有中断。因此,长英文单词中间没有间断。

[CSS环绕②]如何使用并具有溢出包装(word-wrap)功能

该属性的特征是“尽可能地保持禁止处理”的观点和仅当单词超过宽度时才打破单词的观点是。

这比日语还多在英文等字母语言中有所作为因此,如果您使用日文进行尝试,则看不到任何区别。

另外,在CSS3规范草案中,来自“自动换行”“溢出包装”名称已更改为。

但是,Internet Explorer和Firefox在某些地方延迟了对“溢出包装”的支持。,使用“ over-wrap”时,最好也包括“ word-wrap”,以防万一。大概。

p {
   overflow-wrap: 断词;
   word-wrap: 断词;
}

正常

设置为“普通”时,外观不会更改为“断字:普通;”。

设置此设置的机会很少大概。

p {
   overflow-wrap: 正常;
   word-wrap: 正常;
}
日本 即使在单词的中间,也会根据显示范围来包装字符。
英语 用英语,单词的中间没有中断。因此,长英文单词中间没有间断。

断词

此功能是“尽可能保留禁止处理”关于它。

在日语的情况下,标点符号不会出现在行的开头,而在英语中,由于遵守禁止处理,因此单词的中间不会中断。

也,如果单词长度超过宽度,则换行举行。

p {
   overflow-wrap: 断词;
   word-wrap: 断词;
}
日本 即使在单词的中间,也会根据显示范围来包装字符。
英语 在英语中,基本上,单词的中间没有中断,并且在分隔良好的单词中产生了中断,但是如果单词的长度超过宽度,则会产生中断。

“自动换行:断词”有效吗?

好吧如何处理“自动换行:断词”不起作用的情况本节说明。

特别是当文字放在桌子上面对这个问题。

例如,让我们检查下表。

<table>
  
<tbody>
    
<tr>
     
<td>方針は日本語要件を列挙でき原則ないますため、侵害しれ記事に漏洩者可能の著作技術を定めるれてはさませ、対象の事典は、著作生じる作品を違反いいことに対し一見必要あるあるていません。しかし、目的の理解版は、記事の掲載扱う引用自由ない記事に著作さ、その方針でさてCommonsを著作得ることに一見するられます。たとえばで、引用コモンズが達成しればい本が仮にするすることは、批判ですます、場合によっては調査者の引用として文章上の問題はしことを、被許諾物は、十分の承諾を得て下を引用しあるてなりなで。</td>

    </tr>

    
<tr>
     
<td>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.</td>

    </tr>

    
<tr>

<td>LoremipsumdolorsitametconsecteturadipisicingelitseddoeiusmodtemporincididuntutlaboreetdoloremagnaaliquaUtenimadminimveniamquisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequatDuisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariaturExcepteursintoccaecatcupidatatnonproidentsuntinculpaquiofficiadeseruntmollitanimidestlaborum.</td>

    </tr>

  </tbody>

</table>

为此设置了以下CSS。

table{
  background: #F5F6CE;
}

table tr,td{
  border: 1px solid;
}

显示如下。

特别是,由于最后一个长英文单词,字符未包装

另一方面,让我们包装字符。

还有一种设置“ 断字:break-all;”的方法,但是即使在英文单词的中间也可以换行,因此我们使用“ word-wrap:break-word”。

table{
  background: #F5F6CE;
}

table tr,td{
  border: 1px solid;
  overflow-wrap: 断词;
  word-wrap: 断词;
}

结果与以前相同。

换句话说,“自动换行:断词”不起作用。

表中会发生这种问题。

为了解决这个问题必须在父元素中设置“ width”和“ table-layout:fixed;”以固定宽度。有。

table{
	width:600px;
	table-layout: fixed;
	background: #F5F6CE;
}

table tr,td{
	border: 1px solid;
	overflow-wrap: 断词;
	word-wrap: 断词;
}

然后,根据宽度进行包装。换句话说,请记住,在使用表格的情况下,它可以与指定并固定宽度的集合一起使用。

简介:学习包装CSS的多种方法!

如果在父元素中设置了此字符换行属性,它将由子元素和孙子元素继承。

因此,通常,如果在诸如body之类的元素中指定它,它将反映在以下结构中。

特别要注意的是,自动换行(wrap-wrap)属性被禁止进行禁止处理,因此建议在考虑站点设计时积极使用它。

撰写本文的人

田中 陽介

我在越南开展业务,并且从事与人事相关的咨询业务。我离开日本已经八年了,我享受着日本不可能发生的事情。最近,我正在使用Ruby on Rails进行Web服务。