Javascript CSS，有没有办法替代make；“文本最后对齐”；在Angularjs？_Javascript_Html_Angularjs_Css

Javascript CSS，有没有办法替代make；“文本最后对齐”；在Angularjs？

javascript html angularjs css

Javascript CSS，有没有办法替代make；“文本最后对齐”；在Angularjs？,javascript,html,angularjs,css,Javascript,Html,Angularjs,Css,text align last适用于主要的最新浏览器，但对某些浏览器来说，它不会像预期的那样工作。e、 g.包括移动浏览器我要做的是使最后一行居中对齐文本这适用于主要浏览器 text-align: justify; text-justify: distribute; -moz-text-align-last: center; -webkit-text-align-last: center; text-align-last: center; 我想在angularjs中我们

text align last适用于主要的最新浏览器，但对某些浏览器来说，它不会像预期的那样工作。e、 g.包括移动浏览器

我要做的是使最后一行居中对齐文本

这适用于主要浏览器

  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>

这说明这是一项实验性技术。另请参见s，不要弄错。

下面是一个使用上述代码的完整示例

Plnkr示例：

App.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>

#lorem, .clone {
  position: absolute;
  line-height: 14px;
  font: 14px arial;
  width: 500px;
}

#lorem {
  text-align: justify;
  overflow: hidden;
  background: white;
}

.clone {
  text-align: center;
}