Question

我在TextView中显示HTML数据，<ul>或<ol>的填充空间超出了要求，但我无法使用CSS调整填充/边距（我更喜欢使用CSS）从HTML方面，任何建议如何实现它？

<html>

<head>
  <style type="text/css">
    body {
      font-size: 14px;
      font-family: -apple-system, Arial, sans-serif;
      color: black;
      margin-bottom: 0px;
      padding-bottom: 0px;
      line-height: 20px;
    }
    
    ul,
    ol {
      padding-left: 10px;
    }
  </style>
</head>

<body>
  <p>Professionals are often vastly more comfortable solving analytical, convergent problems than those requiring more divergent thinking. In this article, Olivier Leclerc and Mihnea Moldoveanu share some strategies for stimulating truly novel thinking.
    They introduce five "flexons," which can be thought of as "languages" for shaping problems that help you bring diverse perspectives to problem solving:</p>

  <ul type="disc">
    <li>Networks</li>
    <li>Evolutionary</li>
  </ul>


  <ol>
    <li>Decision-agent</li>
    <li>System dynamics</li>
    <li>Information-processing :
      <ol>
        <li>Decision-agent</li>
        <li>System dynamics</li>
        <li>Information-processing</li>
      </ol>
    </li>
  </ol>


  <ul type="disc">
    <li>Networks :
      <ul>
        <li type="circle">Decision-agent</li>
        <li type="circle">System dynamics</li>
      </ul>
    </li>
  </ul>

</body>

</html>

这是HTML，CSS的ul,ol {padding-left:10px;}不适用。

将HTML字符串转换为AttributeText的功能

 extension NSAttributedString {
    convenience public init?(styled: String, textAlignment: NSTextAlignment = .center, color: UIColor = .black) {
        guard let data = styled.data(using: String.Encoding.unicode) else {
            return nil
        }
        do {
            let string = try NSMutableAttributedString(data: data,
                                                       options: [NSAttributedString.DocumentReadingOptionKey.documentType: NSAttributedString.DocumentType.html], documentAttributes: nil)
            let paragraphStyle = NSMutableParagraphStyle()
            paragraphStyle.alignment = textAlignment

            string.addAttributes(
                [NSAttributedStringKey.foregroundColor: color],
                range: NSMakeRange(0, string.length)
            )

            self.init(attributedString: string.removingTrailingNewLine)
        } catch {
            return nil
        }
    }

    var removingTrailingNewLine: NSAttributedString {
        if string.hasSuffix("\n") {
            return attributedSubstring(from: NSRange(location:0, length: length - 1))
        }
        return self
    }
}

图像显示填充比应有的多，但无法调整。

Answer 1

已经为ol和ul计算了填充和边距值，您正在查看的是边距，因此将margin-left更改为零或小于原始值。

检查此代码：

  ul,
ol {
  border: 1px solid red; /* for display only*/
  margin-left: 0;
  padding-left: 50px;/* change this value and see how it works */
}

<p>Professionals are often vastly more comfortable solving analytical, convergent problems than those requiring more divergent thinking. In this article, Olivier Leclerc and Mihnea Moldoveanu share some strategies for stimulating truly novel thinking. They
  introduce five "flexons," which can be thought of as "languages" for shaping problems that help you bring diverse perspectives to problem solving:</p>

<ul type="disc">
  <li>Networks</li>
  <li>Evolutionary</li>
</ul>


<ol>
  <li>Decision-agent</li>
  <li>System dynamics</li>
  <li>Information-processing :
    <ol>
      <li>Decision-agent</li>
      <li>System dynamics</li>
      <li>Information-processing</li>
    </ol>
  </li>
</ol>


<ul type="disc">
  <li>Networks :
    <ul>
      <li type="circle">Decision-agent</li>
      <li type="circle">System dynamics</li>
    </ul>
  </li>
</ul>

css样式不适用于iOS中的<ul>和<ol>的TextView

1 个答案: