none
Text-intent in Multi-column Layout RRS feed

 > 

  • 问题

  • Question
    登录进行投票
    0
    登录进行投票

    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:

    2012年5月28日 3:41
    |

答案

  • Question
    登录进行投票
    0
    登录进行投票

    测试后，发现每个出现问题的<p>所占区域是整个两个列的区域：

    所以我尝试在这个要分列的前一个P的样式上加了一个 break-after:column; 值，强制加入分栏符，则就好了。

    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年6月6日 10:59
    |
    版主

全部回复

  • Question
    登录进行投票
    0
    登录进行投票

    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


    2012年5月29日 3:32
    |
    版主
  • Question
    登录进行投票
    0
    登录进行投票

    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
    2012年5月30日 7:06
    |
  • Question
    登录进行投票
    0
    登录进行投票

    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

    2012年6月1日 7:57
    |
    版主
  • Question
    登录进行投票
    0
    登录进行投票

    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
    2012年6月4日 2:40
    |
  • Question
    登录进行投票
    0
    登录进行投票

    测试后，发现每个出现问题的<p>所占区域是整个两个列的区域：

    所以我尝试在这个要分列的前一个P的样式上加了一个 break-after:column; 值，强制加入分栏符，则就好了。

    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年6月6日 10:59
    |
    版主
  • Question
    登录进行投票
    0
    登录进行投票

    如果按照您的方法做是可以实现的，可是问题在于：我不知道一篇文章从哪里开始分列（除非我把每篇文章或者每本书都看一遍然后再调整），文章是从网上随意下载，或者抓取的。

    2012年6月8日 9:44
    |