【问题标题】:R markdown flexdashboard text marginsR markdown flexdashboard 文本边距
【发布时间】:2018-09-26 07:46:30
【问题描述】:

如何在 rmarkdown flexdashboard 文档中为文本创建漂亮的边距? Their manual site 是使用 flexdashboard 创建的,文本很好地跨越了中间的可读区域,并且没有到达屏幕的两侧。边距很好地适应浏览器窗口的宽度。尽管多次尝试指定{data-width}{data-padding},但我无法重现此行为。我的文本总是从一边到另一边,这在宽浏览器窗口中看起来不太好。示例 Rmd 文件:

---
title: "Text width problem"
output:
  flexdashboard::flex_dashboard:
    orientation: rows
---

I'd like this text to have margins on the sides. I'd like this text to have 
margins on the sides. I'd like this text to have margins on the sides. I'd 
like this text to have margins on the sides. I'd like this text to have 
margins on the sides. I'd like this text to have margins on the sides. I'd 
like this text to have margins on the sides. I'd like this text to have 
margins on the sides. I'd like this text to have margins on the sides. I'd 
like this text to have margins on the sides. I'd like this text to have 
margins on the sides. I'd like this text to have margins on the sides. I'd 
like this text to have margins on the sides. I'd like this text to have 
margins on the sides.

【问题讨论】:

    标签: r r-markdown flexdashboard


    【解决方案1】:

    通过使用 CSS 设置文档样式。在这里,我们缩小了整个文档。

    ---
    title: "Text width problem"
    output:
      flexdashboard::flex_dashboard:
        orientation: rows
    ---
    
    <style>
    body {
      padding: 0px 200px 0px 200px;
    }
    </style>
    
    
    This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides.
    

    另一种方法是使用特定 ID 将 div 容器包裹在您的文本周围

    <div id="myText">
    ....
    </div>
    

    然后修改

    <style>
    #myText {
      width: 300px;
      margin: auto;
    }
    </style>
    

    【讨论】:

      猜你喜欢
      • 2021-11-21
      • 1970-01-01
      • 2022-01-10
      • 2017-11-22
      • 2018-07-20
      • 1970-01-01
      • 2021-05-13
      • 2020-09-01
      • 1970-01-01
      相关资源
      最近更新 更多