【问题标题】:Text overflow behaviour in CSS with non-left values for text-alignCSS 中的文本溢出行为,文本对齐的非左值
【发布时间】:2011-04-15 03:14:42
【问题描述】:

给定以下 HTML:

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
</p>

还有以下 CSS:

p {
  border: 1px solid red;
  width: 200px;
  text-align: right;
  white-space: nowrap; 
}

预期的渲染是什么?我原以为文本会靠在 para 的右侧并溢出到左侧。在 Fx/Safari/Opera 中观察到的结果将文本放在左侧并溢出到右侧。 text-align:center; 也出现了同样的问题。我希望文本能够平等地溢出到两边。

CSS2.1 和 CSS3 Text 似乎没有指定渲染。

测试链接:http://www.webdevout.net/test?0e&raw

【问题讨论】:

    标签: css overflow text-align


    【解决方案1】:

    CSS 2.1 规范的“Inline Formatting Context”部分说:

    当内联的总宽度 一行上的框小于宽度 包含它们的线框,它们的 横向分布 行框由 “文本对齐”属性。如果说 属性的值为 'justify', 用户代理可以拉伸空间和 内联框中的单词(除了 inline-table 和 inline-block 框) 也是。

    当内联框超出宽度时 一个线框,它被分成 几个盒子,这些盒子是 分布在几个线框。 如果内联框无法拆分 (例如,如果内联框包含 单个字符,或特定语言 断字规则不允许休息 在内联框中,或者如果 内联框受 nowrap 或 pre) 的空白值, 然后内联框溢出该行 盒子。

    因此,text-align 属性仅用于行框长度小于块宽度的情况。如果行框比其包含元素宽,则不考虑 text-align 属性。

    【讨论】:

      【解决方案2】:

      在使用the direction property 之后,我能够得到你想要的结果,例如

      p { 
          direction: rtl; 
          border: 1px solid red; 
          width: 200px; 
          text-align: right; 
          white-space: nowrap;
      }
      

      这适用于当前版本的 Firefox、Safari 和 IE。

      【讨论】:

      • 好的,这是我的测试用例的解决方法。我在考虑更多问题的通用解决方案:例如text-align: center 会发生什么?
      • 我不知道该问题的一般解决方案。也就是说,我不相信这是一个问题。你有用例吗?
      • 图片的堆叠网格,每张图片下方的标题。我得到的设计有一些比每个单独的“单元格”更宽的标题,要求它们溢出其他单元格的顶部。
      • 虽然这可能适用于某些情况,但direction: rtl; 可能会对实际文本内容产生不良影响,例如数字和标点符号将分别位于该行的右侧和左侧。如果可能的话,可以将文本元素摆弄到float: right; 它。在这里抛出一堆例子:jsfiddle.net/notacouch/nx6ka3hq
      【解决方案3】:

      哦,我以前遇到过。 align:right 只影响框中的内容,任何溢出总是左对齐,只有用“direction”反转文本的方向才能改变它。

      【讨论】:

        【解决方案4】:

        您可以创建外部信封容器限制大小 显示内容的内部元素向右浮动,例如:

        HTML:

        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
        </div>
        

        CSS:

        DIV {
            width: 200px;    
            overflow: hidden;
            border: 1px solid red;
        }
        P {
            float: right;
            white-space: nowrap;
        }
        

        回应 Olly Hodgson 的想法:

        direction: rtl;
        

        从句尾(从右)作为第一个字符(向左)抛出插补(Google Chrome v. 38)

        【讨论】:

        • 确实! “正在从句末(从右)作为第一个字符(向左)(Google Chrome v. 38)抛出插补”
        • 您找到解决 Chrome 38 问题的方法了吗?
        猜你喜欢
        • 2018-10-07
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2020-01-03
        • 1970-01-01
        相关资源
        最近更新 更多