CSS，有没有办法在 Angularjs 中制作“text-align-last”

CSS, Is there way alternatively make "text-align-last" in Angularjs?

本文关键字：text-align-last Angularjs 有没有 CSS      更新时间：2023-09-26

text-align-last 适用于主要的最新浏览器，但对于某些浏览器，它无法按预期工作。 例如，包括移动浏览器。

我试图做的是使最后一行居中对齐的文本。

这适用于主要浏览器

  text-align: justify;
  text-justify: distribute;
  -moz-text-align-last: center;
  -webkit-text-align-last: center;
  text-align-last: center;

我想在 angularjs 中我们应该使用指令，但我不太擅长这些。链接显示了简单的JavaScript方法。任何帮助都非常感谢。

编辑

我不确定这是否可行

.directive('justCenter', function() {
  return {
    restrict: 'AC',
    link: function (scope, element, attrs) {          
       scope.$watch(attrs.myCenter, function (value) {
        var clone = element.createElement('p');
        clone.textContent= element.textContent;
        clone.className= 'clone';     
        elemt.parentNode.insertBefore(clone, element);
        element.style.height= p.offsetHeight - 14 + 'px';
       });                      
    }
  }
})

谁能帮我把它工作...？也许像这样的形式

<just-center my-center="something"> </just-center>

MDN的这份文档说这是一项实验性技术。另请参阅对手机的支持，不要弄错。

下面是 Angular 中使用上面指定的代码的完整示例。

Plnkr 示例：https://plnkr.co/edit/2AD8ePWuGJeSbvcQIKQj

应用.js 

var app = angular.module('angularApp', []);
app.controller('MainCtrl', function($scope, $http) {
});
app.directive('justifyLastCenter', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var p = element[0];
      var clone = document.createElement('p');
      clone.textContent = p.textContent;
      clone.className = 'clone';
      p.parentNode.insertBefore(clone, p);
      p.style.height = p.offsetHeight - 14 + 'px';
    }
  }
});

.HTML

<!DOCTYPE html>
<html ng-app="angularApp">
<head>
  <meta charset="utf-8" />
  <title>Justify and center last line of text Angular directive</title>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as main">
  <div>
    <p id="lorem" justify-last-center>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</body>
</html>

.CSS

#lorem, .clone {
  position: absolute;
  line-height: 14px;
  font: 14px arial;
  width: 500px;
}
#lorem {
  text-align: justify;
  overflow: hidden;
  background: white;
}
.clone {
  text-align: center;
}
相关文章：