CSS、Angularjsで "text-align-last"を作成する方法がありますか？

text-align-lastは、メジャーな最新のブラウザで動作しますが、一部のブラウザでは期待通りに動作しません。例えばモバイルブラウザが含まれています。CSS、Angularjsで "text-align-last"を作成する方法がありますか？

私がしようとしているのは、最後の行を中央揃えにして両端揃えのテキストを作ることです。

これは主要なブラウザ

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

に働く私たちはディレクティブを使用する必要がありますangularjsに仮定が、私はそれらではあまり良くないです。 Linkはそれを行うためのプレーンな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>

出典

2016-03-18 karma

このdoc from MDNよう多分何かが、それは実験的な技術であると言います。 support for mobileも参照してください。誤解されることはありません。

出典

2016-04-28 06:24:51

ここでは、上で指定したコードを使用した、Angularの完全な例を示します。

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

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="[email protected]" 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; 
}

出典

2016-04-28 06:54:43 carlcheel

CSS、Angularjsで "text-align-last"を作成する方法がありますか？

答えて

関連する問題