积极答复者
Text-intent in Multi-column Layout

问题
-
When the first column filled with the text ,the second column,first paragraph will be indented;when the first column is not full of the text,the second column,first line is not indented.I want a paragraph indentation even if the first one not full , how can I do.AS shown below:
答案
-
测试后,发现每个出现问题的<p>所占区域是整个两个列的区域:
所以我尝试在这个要分列的前一个P的样式上加了一个 break-after:column; 值,强制加入分栏符,则就好了。
Bob Bao [MSFT]
MSDN Community Support | Feedback to us
- 已标记为答案 Jie BaoModerator 2012年6月7日 8:31
全部回复
-
How do you code above UI, via RichTextBlock and RichTextBlockOverflow? Could you please share some code here then I can test and reproduce it in my side, thanks.
Sincerely,
Bob Bao [MSFT]
MSDN Community Support | Feedback to us
- 已编辑 Jie BaoModerator 2012年5月29日 3:33
-
hi,thanks for your reply,
it is not a RichTextBlock or RichTextBlockOverflow,it is just a HTML5 <p> element. here's the html code and css:
<p class="_para">EPSS系统中的各个子系统为用户提供不同的支持:</p> <p class="_para">⑴超媒体信息库:提供能提升工作绩效的所有数据与信息,以便于搜索与获得,通常用超链接方式来组织和存储数据;</p> <p class="_para">⑵专家系统:提供问题解决、诊断、障碍排除、决策支持及分析等功能。通常由知识库或规则库与推理机制所构成;</p>
/*段落首行缩进*/ .ReadPage section[role=main] article .ReadPage_Div_MainArtical ._para { text-indent: 2em; }
- 已编辑 Cherish_ 2012年5月30日 7:12
-
Who uses this class "ReadPage_Div_MainArtical"? And what is the entire code for this reader?
Just testing this style, all P elements with it can show the text indent correctly.
Bob Bao [MSFT]
MSDN Community Support | Feedback to us
-
This is some of the code:
<body> <div id="ReadPage_Div_Menu" data-win-control="WinJS.UI.Menu"> </div> <section role="main" id="ReadPage_Main"> <article> <div class="ReadPage_Div_MainArtical"></div> </article> </section> </body>
@media screen and (-ms-view-state: fullscreen-landscape) {
.ReadPage_Div_MainArtical {
margin-right: 80px;
line-height: 2;
margin-bottom: 10px;
margin-top: 0px;
vertical-align: baseline;
font-family: 'Microsoft YaHei';
word-break:break-all;
text-indent: 2em;
color: #f00;
}
section[role=main] {
-ms-grid-row: 2;
overflow-y: hidden;
overflow-x: auto;
height: 500px;
width: 100%;
color: #ffd800;
}
/*Multi-column Layout */
section[role=main] article {
column-fill: auto;
column-gap: 0px;
columns: auto 560px;
height: calc(100% - 50px);
color: #282017;
text-align: justify;
margin-left: 120px;
width: 560px;
color: #4cff00;
}
}Windows.Storage.PathIO.readTextAsync(GlobalData.currentsection.parent.parent.folderPath + "\\" + GlobalData.currentsection.parent.parent.chapters[NextChapterIndex].folderPath + "\\" + GlobalData.currentsection.parent.parent.chapters[NextChapterIndex].sections[SectionIndex].folderPath + "\\" + "content.txt").then(function (str) { event.srcElement.element.querySelector("article .ReadPage_Div_MainArtical").innerHTML = str;
the context.txt is the text of the page,such as:
<p class="_para">EPSS系统中的各个子系统为用户提供不同的支持:</p> <p class="_para">⑴超媒体信息库:提供能提升工作绩效的所有数据与信息,以便于搜索与获得,通常用超链接方式来组织和存储数据;</p> <p class="_para">⑵专家系统:提供问题解决、诊断、障碍排除、决策支持及分析等功能。通常由知识库或规则库与推理机制所构成;</p>
- 已编辑 Cherish_ 2012年6月4日 5:52
-
测试后,发现每个出现问题的<p>所占区域是整个两个列的区域:
所以我尝试在这个要分列的前一个P的样式上加了一个 break-after:column; 值,强制加入分栏符,则就好了。
Bob Bao [MSFT]
MSDN Community Support | Feedback to us
- 已标记为答案 Jie BaoModerator 2012年6月7日 8:31